This content originally appeared on DEV Community and was authored by Sebastian
Hello together,
I started using React Native some time ago and didn't know how to improve my skills.
So I had decided to rebuild the dev.to app.
I have now done the first steps and start with a blog series about my dev.to clone.
The app is based on React Native in combination with EXPO and as database I use Google Firebase.
Currently the app consists of the article feed, which is retrieved from the database and some screens which are accessible via the page navigation, the topbar and the user modal via the avatar icon.
You can find the whole project here: https://github.com/Gismo1337/dev-to-clone
All beginners are invited to work with me on this clone. So we learn together how to work with Github and if a mistake happens, the world won't end.
There is a step by step guide in the readme file. So you are able to start the app on your own machine.
Of course it is not allowed to use the app for any other purpose than training or as a dev.to. It may happen, if dev.to asks me to do so, that I take the project offline.
Please excuse my English. I'm still working on that too =)
----- README -----
Requirements
Installation
1) Download the project
Open the project path in terminal.
git clone https://github.com/Gismo1337/dev-to-clone
cd dev-to-clone
npm install
2) Create the database
Visit https://console.firebase.google.com/
- Create new project
- Name the project -> click next
- Disable Analytics -> click next
- Wait until create -> click next
- Chose 'Firestore Database' in navigation
- Click create database
- Choose 'start in testmode' -> click next
- Choose server destinatin near your location -> click next
- Click the projectoverview at top of navigation
- Add firebase as web by click on icon </>
- Name the app
- Click create
You see the needed credentials likle this:
apiKey: "AIzaSyAtxgrnlAtGXV-OdwMVngC6KmLZXG1BQwQ",
authDomain: "test-bf771.firebaseapp.com",
projectId: "test-bf771",
storageBucket: "test-bf771.appspot.com",
messagingSenderId: "920493813599",
appId: "1:920493813599:web:a35040e0933196768390ea"
save this for later in a random txt file.
3) Enviroment File
Copy env.template
Rename the file to .env
Open the .env file and paste the credentials from your random txt file into the .env file.
API_KEY=AIzaSyAtxgrnlAtGXV-OdwMVngC6KmLZXG1BQwQ
AUTH_DOMAIN=test-bf771.firebaseapp.com
PROJECT_ID=test-bf771
STORAGE_BUCKET=dtest-bf771.appspot.com
MESSAGING_920493813599
APP_ID=1:920493813599:web:a35040e0933196768390ea
4) Dummydata
- Open https://console.firebase.google.com/ and open 'Firestore Database'
- Create collection named 'posts'
- Create document with random ID and follwing fields:
author: 'John Doe' [string]
comments: 13 [number]
date: 'Nov 22' [string]
id: 1 [number]
imagePath: '***PATH_TO_IMAGE_HERE***' [string]
likes: 41 [number]
readTime: 7 [number]
tag1: '#JavaScript' [string]
tag2: '#ReactNative' [string]
tag3: '#Composer' [string]
text:'Lorem ipsum dolor sit amet consectetur adipisicing elit.' [string]
title:'Top 10 React Native' [string]
Feel free to add more dummy data with this pattern.
4) Start the Expo Server
- Open the project path in terminal.
- (Re)Start server with clean cache by running
expo start -c
This content originally appeared on DEV Community and was authored by Sebastian
Sebastian | Sciencx (2022-04-20T20:37:08+00:00) dev.to app react native clone to improve my skill – blog diary. Retrieved from https://www.scien.cx/2022/04/20/dev-to-app-react-native-clone-to-improve-my-skill-blog-diary/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.