Introduction
In today’s fast-paced world, organizing your study plan and keeping track of potential universities for higher education can be a daunting task. That's where Scholalyst comes in—a smart app that simplifies study planning and helps students manage their university choices. This web app, built using React, Firebase, Render, and Vercel, allows users to organize their tasks with deadlines, receive reminders, and save universities they’re interested in.

In this post, I’ll walk you through the development of Scholalyst, the technologies I used, and some of the challenges I encountered during the process.

Tech Stack
Here’s a quick overview of the technologies I used for the project:

React: A JavaScript library for building user interfaces. React makes it easy to create reusable components, and its state management tools help make the app dynamic.

Firebase: Firebase is used for backend functionality, including authentication (Google and email login) and real-time database for storing user data like study plans and saved universities.

Render: I used Render for the backend of the project. Render allows me to deploy server-side functions and APIs, ensuring smooth communication with Firebase for tasks like storing study plans and university baskets.

Vercel: For frontend deployment, I used Vercel, which offers fast and reliable serverless hosting for React applications.

Key Features of Scholalyst

  1. Study Plan One of the main features of Scholalyst is the study plan. Users can add tasks with specific deadlines and track their progress. The app allows for:

Adding tasks with titles and deadlines.

Viewing tasks in order of their deadlines, with upcoming tasks highlighted.

Deleting tasks when they’re completed.

Real-time notifications: Reminders when a task’s deadline is near, so users don’t forget important study milestones.

2. University Basket
The university basket feature helps students save universities they're interested in. It includes:

Saving university information: Name, country, website, and domains.

Deleting saved universities: Users can remove universities from their basket if they decide not to apply to them.

  1. User Authentication To ensure that each user has their own personalized study plan and university basket, I integrated Firebase Authentication with Google and email/password login methods. This allows users to securely sign in to their accounts and access their data.

Challenges and Solutions

  1. Handling Real-Time Data with Firebase
    One of the challenges I faced was working with Firebase Realtime Database to manage real-time updates for tasks and saved universities. With Firebase, data updates instantly across all devices, which was a big plus for the app, but I had to carefully manage reading and writing data to ensure that tasks and universities didn’t overwrite each other when there were multiple users.

  2. Authentication Setup
    Integrating Firebase Authentication, especially Google sign-in, came with a few hiccups. Initially, I ran into an unauthorized domain error when trying to use Google login in my app. To resolve this, I had to go to the Firebase Console and add the correct domain under the Authorized Domains section for OAuth operations.

  3. Optimizing App Performance
    Another challenge was ensuring that the app worked smoothly, even as the list of tasks or saved universities grew longer. I utilized efficient Firebase queries to load data in chunks, reducing load times and preventing the app from becoming sluggish.

Step-by-Step Guide to Key Features

  1. Setting Up Firebase Authentication:
    Create a Firebase Project: Go to the Firebase console and create a new project.

  2. Enable Authentication: In the Firebase console, enable Google and email/password sign-in methods.

  3. Add Firebase SDK to Your React App: Install the Firebase package, configure Firebase in your app, and initialize authentication.

  4. Implement Authentication UI: Add Google login and email sign-in forms to your app, handling state changes and navigation based on the user’s login status.

  5. Managing Real-Time Data with Firebase:
    Set Up Firebase Realtime Database: Create a database in Firebase and set up references for tasks and saved universities.

  6. Add Data to Firebase: Use Firebase’s push method to add tasks and universities.

  7. Retrieve and Display Data: Use the onValue listener to display real-time updates of tasks and universities.

Deployment
For deployment, I used Vercel for the frontend and Render for the backend.

Vercel for Frontend:
Push your project to GitHub.

Connect your GitHub repository to Vercel.

Configure environment variables (like Firebase API keys) in Vercel’s dashboard.

Deploy the app by clicking the “Deploy” button in Vercel.

Render for Backend:
Push your backend code (like API routes or server-side logic) to GitHub.

Create a Render Account and connect your repository.

Render automatically detects the backend framework you're using and sets up a build pipeline.

Configure environment variables for backend services like Firebase on the Render dashboard.

Click "Deploy" to start your backend on Render.

Troubleshooting Deployment:
CORS issues: Firebase can sometimes block requests due to CORS (Cross-Origin Resource Sharing). I configured the appropriate headers in Firebase’s Firestore rules.

Firebase config: Ensure your Firebase configuration keys are correctly set in the environment variables on both Render and Vercel to avoid any issues with initialization.

Conclusion
Building Scholalyst was a rewarding experience. It’s an app that helps students stay organized and efficient while planning their studies and university applications. The combination of React, Firebase, Render, and Vercel gave me the flexibility and performance I needed to create a seamless user experience. The use of Render for backend hosting and Vercel for frontend deployment helped me scale the app efficiently while ensuring smooth real-time updates.

In the future, I plan to improve the app by adding more features, such as task categorization, task priority, and better analytics to help students optimize their study time. I’m excited to continue developing Scholalyst and hope it becomes a valuable tool for students everywhere!

link
https://scholalyst-idvt-git-main-draron-dare-045s-projects.vercel.app/