Fupps
Fupps is a student portal and blog web app I’m working on. It helps students access academic resources, stay updated with school news, view the timetable, and connect with school staff. The app includes a blog section where students can read and create posts, and it aims to make communication within the school community smoother and more efficient.
Project Purpose and Goal
This project was structured in distinct phases, each adding progressively more features. Phase 1 – Initial Setup and Core Features: This phase focused on setting up the basic structure of the app, creating the faqs, calendar, landing and leaders pages. Also implementing authentication with Firebase and creating the foundational pages like the dashboard and timetable. The goal was to get the app functional with basic features for student access and interaction.
In Phase 2 I added the blog section, allowing students to create and read posts. I focused on building out the UI for blog posts, ensuring that the content was easy to manage and displayed properly. This phase also included integrating user-generated content and making sure the blog was responsive.
The final phase involved refining the app by optimizing performance and enhancing the user experience. I added features like real-time updates, improved navigation, and made the app more intuitive and engaging. This phase also included testing and bug fixing to ensure everything worked smoothly for users.
Web stack and Explanation
To handle state management and caching, I incorporated React Query for fetching and caching data efficiently. React Query improves performance by reducing the number of requests to the server, especially when displaying lists or frequently updated data, like blog posts or student timetable changes. It ensures that data is kept up-to-date without over-fetching, providing a smooth user experience.
For backend functionality, Firebase was chosen for its ease of use and scalability in managing authentication and real-time database features. Firebase Authentication handles user logins, while Firebase Firestore stores and retrieves student data, blog posts, and other essential content. Firebase’s real-time data syncing ensures that any updates made in the backend are reflected instantly on the frontend, without needing manual refreshes.
Lessons Learned
one of the biggest lessons I learned was how to adapt when there was no Figma design provided. With no design to follow, I had to get creative and figure out how to piece things together on my own. I spent time experimenting with different color combinations and layouts to ensure the app was visually appealing .I used Canva for the LOGO . I also worked with another developer, which taught me more about collaboration and resolving conflicts. As we were both working on different parts of the project, I had to regularly sync with my colleague to make sure our work didn't overlap. On several occasions, we ran into issues with merge conflicts in our branches and we solved it.
Other Projects
Kollabo
This Application Streamlines administrative tasks, making it easier to manage the users data and also to monitor the business performance.
Learn More