Live: StudyFlow Live
Unlock focused learning. Start your personal StudyFlow today.
- Organize notes and links for anything you want to study.
- Track your progress and stay on track.
- Team
- Project Overview
- Key Features
- Installation
- Demo
- Tech Stack
- API Documentation
- Acknowledgements
- Future Plans
Jason Morgan
Jay Yong
Jeremy Spence
Korey Hines
What is the primary goal of your project? The primary goal of this project is to provide users with an interface that allows them to encapsulate and organize their self study efforts all on one platform so that they can keep track of their work, organize their syllabi, and stay focused instead of getting lost in the endless rabbithole of information on the internet.
Provide a brief summary of your project idea. This project will be a web app that is a kanban board specifically made for you to create and interact with a syllabus.
You will have three columns [To Do, In Progress, Completed] where you can create and manage cards. You will be able to drag and drop cards from one column to the next (if this is overly complicated we can just put a button to move the card to the next column).
Each card should have a single idea to learn about. You can add a few resources to help you learn this. Articles, youtube videos, walkthroughs, documentations etc. There will also be a section for you to add any notes that you take or links to github repos. You will also be able to estimate the amount of time that it will take to complete this card.
You should be able to see the progress through the board in a progress bar.
You will be able to create “public templates” that other people can download and work through themself.
Independent Learners: Those like all of us that are committed to bettering themselves and are looking for a more structured way to better their efforts. This product will attract people that have high digital literacy skills and are looking to learn an “internet skill”.
Educators: For educators that are looking to give their students a focused board with resources to learn a specific topic they could create a public template and share it with their students to work through at their own pace.
Home
Users can access all of the boards that they have created or downloaded. Here boards can be deleted, created, or if you're looking for something premade you can click templates to browse boards other people have uploaded.
Board
Users can view their boards here. You can see how much progress you have made in the board. You can move cards between columns with drag and drop. You can create a new card. You can also edit the title of the board.
Card
Users can view the contents of the card. Each checklist should have an external link to learn more about the given topic. Once that resource has been completed you can check it off. You can keep notes to reference later. You can also edit or delete the card.
Templates
Users can search through already made templates so they don't have to start from scratch. Templates can be downloaded to your board list so you can make any changes that you want to. Templates can also be uploaded from the boards that you have made so you can share your boards with others.
Account
Users can manage their account on the account page. You can edit or delete the public templates that you have uploaded as well as reset your password in case you forgot it. You can also view some of your analytics for your boards.
- Rendering Framework: React
- Build Tool: Vite
- Programming Language: TypeScript
- Styling: Tailwind CSS
- API Framework: Flask
- ORM (Object-Relational Mapping): SQLAlchemy
- Platform: Auth0
- Signing: JWT
- Database System: PostgreSQL
- Platform: Render.com
Models
API Routes - Board Management
API Routes - Card Management
API Routes - Template Management
API Routes - Template Card Management
API Routes - Additional Routes
Unit Testing:
- Tested all client-side components individually.
- Ensured components function correctly in isolation.
Integration Testing:
- Tested the interactions between API hooks and components.
- Verified seamless communication between the frontend and backend.
Server-Side Testing:
- Used pytest to test all CRUD capabilities.
- Ensured all APIs worked correctly with comprehensive tests.
Justice Through Code - For all the classes and support to get us to the point of being able to create a project like this
Our Mentors: Abhinav Tekulapally and Ren Demeis-Ortiz
Roadmap.sh - For the information used in the premade templates