Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thepuskar/todoist-clone
Built Todo App Using React (Custom Hooks, Context), Firebase & React Testing Library. In addition to the latter technologies, I had styled the application using SCSS (CSS) and following the BEM naming methodology.
https://github.com/thepuskar/todoist-clone
custom-hooks firebase react scss
Last synced: 2 months ago
JSON representation
Built Todo App Using React (Custom Hooks, Context), Firebase & React Testing Library. In addition to the latter technologies, I had styled the application using SCSS (CSS) and following the BEM naming methodology.
- Host: GitHub
- URL: https://github.com/thepuskar/todoist-clone
- Owner: thepuskar
- License: mit
- Created: 2020-04-01T10:09:49.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T11:40:32.000Z (almost 2 years ago)
- Last Synced: 2023-03-07T21:09:05.686Z (almost 2 years ago)
- Topics: custom-hooks, firebase, react, scss
- Language: JavaScript
- Homepage:
- Size: 2.34 MB
- Stars: 24
- Watchers: 1
- Forks: 4
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Todo App
In this repo, I am had created the popular Todoist application using create-react-app as a base from scratch using React (Custom Hooks, Context), Firebase & React Testing Library (unit & integration testing). In addition to the latter technologies, I had styled the application using SCSS (CSS) and following the BEM naming methodology and I had to make sure that the application is fully responsive.
Screenshot
🛠 Installation & Set Up
#### 1. Install and use the correct version of Node
```
npm install
```
#### 2. Install dependencies
```
+ npm install --save-dev @testing-library/jest-dom
+ npm install --save-dev @testing-library/react
+ npm install @testing-library/user-event --save-dev
+ npm install --save firebase
+ npm install moment --save
+ npm install node-sass
+ npm install react react-dom
+ npm install react-icons --save
```
#### 3. Start the development server
```
npm start
```
# 🛠 Set Up for firebase
1. Create a Firebase project in the Firebase console, click Add project, then follow the on-screen instructions to create a Firebase project or to add Firebase services to an existing GCP project.
2) Navigate to the Database section of the Firebase console. You'll be prompted to select an existing Firebase project. Follow the database creation workflow.
3) Select a starting mode for your Firebase Security Rules:
- Test mode
Good for getting started with the mobile and web client libraries, but allows anyone to read and overwrite your data. After testing, **make sure to review the [Understand Firebase Realtime Database Rules](https://firebase.google.com/docs/database/security) section.**
To get started with the web, iOS, or Android SDK, select test mode.
- Locked mode
Denies all reads and writes from mobile and web clients. Your authenticated application servers can still access your database.
4. Click **Done**.
When you enable Realtime Database, it also enables the API in the [Cloud API Manager](https://console.cloud.google.com/projectselector/apis/api/firebasedatabase.googleapis.com/overview).
## Firebase config object
To initialize Firebase in your app, you need to provide your app's Firebase project configuration.
```
import firebase from "firebase/app";
import "firebase/firestore";
const firebaseConfig = firebase.initializeApp({
apiKey: "API-KEY",
authDomain: ""project-id.firebaseapp.com"",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id",
});
export { firebaseConfig as firebase };
```
# #🚀HappyCoding