Brain-Box is a web application that allows students to organize and manage their study materials, including subjects, chapters, notes, and video links.
- 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.
InShot_20230801_164243865.mp4
- Frontend: React, React Router, Firebase Authentication, Tailwind CSS
- Backend: Firebase Cloud Firestore
- Deployment: Vercel
-
Clone the repository: git clone https://github.com/RishabhJain0721/Brain-Box.git
-
Install dependencies:
- cd Brain-Box
- npm install
-
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 :
-
-
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.
If you find any bugs or want to contribute to this project, feel free to open an issue or submit a pull request.
- The application was built using React and Firebase.
- The UI is styled using Tailwind CSS.
For any inquiries, you can reach us at rishujain0721@gmail.com.