maruthisingh / brain-box

Brain-Box is a web application that allows students to organize and manage their study materials, including subjects, chapters, notes, and video links.

Brain-Box

Brain-Box is a web application that allows students to organize and manage their study materials, including subjects, chapters, notes, and video links.

Features

• Authentication: Users can sign up and log in to the Brain-Box using their email and password.
• Subjects and Chapters: Users can create, view, and organize subjects and their corresponding chapters.
• Notes and Video Links: Users can add and manage notes and video links for each chapter.
• Real-time Updates: Any additions or deletions made to subjects, chapters, notes, or video links are instantly updated in the application.

Working video

InShot_20230801_164243865.mp4

Screenshots

Home Page

Sign Up page

Login page

Dashboard Pages :

Tech Stack

• Frontend: React, React Router, Firebase Authentication, Tailwind CSS
• Backend: Firebase Cloud Firestore
• Deployment: Vercel

Local installation

1. Clone the repository: git clone https://github.com/RishabhJain0721/Brain-Box.git

2. Install dependencies:

   • cd Brain-Box
   • npm install

3. Set up Firebase:

   • Create a new Firebase project at https://console.firebase.google.com/.

   • Click on "Build" in the window that pops up.

     

   • Click on "Authentication" -> "Get started" -> "Email/Password"

     

   • Enable the "Email/Password" option and save.

     

   • Now again click on on "Build" and select "Firestore Database".

     

   • Click on "Create Database" -> "Next" -> "Create" to create a database.

   • Now we will update the security rules to allow read/write in DB.

   • Click on "Rules" and make the changes shown in picture and Publish the changes.

     

   • Go to project settings

     

   • Register the webapp as shown.

     

   • Copy the firebaseConfig object.

     

   • In the src/firebase.js file, replace the Firebase configuration with your own configuration from the Firebase Console and let the other imports export remain as shown in the image here :

     

4. Start the development server: npm start

The application will be accessible at http://localhost:3000. You can check the new users and data collected on the application on your firebase console.

Contributing

If you find any bugs or want to contribute to this project, feel free to open an issue or submit a pull request.

Acknowledgements

• The application was built using React and Firebase.
• The UI is styled using Tailwind CSS.

Contact

For any inquiries, you can reach us at [email protected].

---