Lister

Lister was created to keep track of Todos in various pre set categories in the Calendar (Today, Next 7 Days and All Days)
Users can also log in and add their own Categories called "Projects" and add Todo's undder those categories.

Live Demo | Report a Bug

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Features

About the Project

Built With

• Firebase
• React
• JavaScript
• CSS
• Moment
• Date-fns
• Material UI

back to top

Getting Started

Installation

1. Clone the repo

   git clone [email protected]:Michaela-K/lister.git

2. Install NPM packages in the root directory

   cd lister
   npm install

3. Create a Firebase Project

   • Go to your Firebase Console
   • Sign In with your Google account
   • Click on 'Add Project' and follow the instructions to create a new Firebase project

4. Configure Firebase

   • In the Firebase Console, select your project
   • Navigate to "Project settings" > "General" > "Your apps" and add a new web app.
   • Copy the Firebase config object

5. Set Up Firebase Configuration in React App

   • In your React project, create a ".env" file in the root directory
   • Add your Firebase configuration to this file as environment variables:

   REACT_APP_FIREBASE_API_KEY=your_api_key
   REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
   REACT_APP_FIREBASE_PROJECT_ID=your_project_id      
   REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   REACT_APP_FIREBASE_APP_ID=your_app_id

6. Initialize Firebase in the App

   • In your React app, initialize Firebase using the config stored in the .env file.
   • Enter this in the firebase.js file.

   const firebaseConfig = {
     apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
     authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
     projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
     storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
     messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
     appId: process.env.REACT_APP_FIREBASE_APP_ID
   };

7. Start the app

   npm start
   Visit http://localhost:3000/

8. Log In with the credentials below

   Email: [email protected]
   Password: password

back to top

Features

• Host the project (Work in Progress)
• Register user in firebase
• Sign In / Sign Out User
• Add New Todo (date, time, project category)
• Edit todo
• Delete todo
• Add a Project
• Edit a Project
• Delete Project

back to top