StudyFlow is a student-friendly task and study planner made for a college semester project. It is built to feel practical, clean, and realistic for day-to-day academic use while still being simple enough to explain in a viva or class presentation.
- College students often manage assignments, submissions, lab work, exams, and group work in different places.
- A simple to-do list is not enough when tasks need deadlines, priorities, and team members.
- This project shows how React and Node.js can solve a real student problem without using overcomplicated architecture.
- It is a good syllabus match because it demonstrates HTML, CSS, JavaScript, React components, props, state, hooks, forms, CRUD, routing-style navigation, and backend API concepts.
The app helps students:
- track assignments and project tasks
- assign classmates to a task
- move tasks across board columns
- plan solo or group focus sessions
- see a simple dashboard summary
- Login and signup screens
- Student dashboard with totals for all, completed, and pending work
- Kanban board with drag and drop between columns
- Create, edit, and delete tasks
- Task fields for title, subject, deadline, priority, status, and assigned people
- Group and solo focus sessions
- Course-based task organization
- Responsive layout for mobile and desktop
- Error handling and loading states
- Beginner-friendly code structure
- It is more realistic than a normal note-taking app.
- It shows how a student team could share work in one place.
- It makes deadlines easier to see.
- It supports focus sessions so students can actually work on the tasks they created.
- It is simple enough to extend later, but not overengineered for a semester submission.
- React
- TypeScript
- Plain CSS
- Node.js
- Express
- MongoDB support in the backend folder
- Auth page for login and signup
- Board page for task management and task assignment
- Dashboard page for quick stats
- Planner page for organizing study time
- Focus page for solo or group study sessions
- Courses page for viewing subject cards
- Create tasks from the board
- Read tasks in the board and detail panel
- Update status, deadline, priority, and assignees
- Delete tasks from the task detail view
- Title
- Subject or course
- Deadline
- Priority
- Status
- Assigned classmates
- Difficulty and study estimate
- Solo mode for individual study
- Group mode for shared study sessions
- Group members can be prefilled from the people assigned to the task
- Easy timer controls for start, pause, and reset
src/contains the React clientserver/contains the Express backend example with MongoDB supportserver-setup-guide.mdandLOCAL_SETUP_MONGODB.mdexplain backend setup
- React components: the UI is split into reusable parts
- Props: data flows between pages and cards
- State: forms, modals, filters, and timers use component state
- Hooks:
useStateanduseEffectare used throughout - Forms: login, signup, add task, edit task, and session controls
- API calls: data actions are wrapped in a service layer
- CRUD: tasks can be created, edited, updated, and deleted
- Node and Express: backend folder includes REST route examples
- MongoDB: backend code is prepared for database-based storage
- Email:
aarav@college.edu - Password:
student123
npm install
npm run devOpen the app in the browser at the Vite local URL.
cd server
npm install
npm run devThe server folder is available for MongoDB-based practice and backend demonstrations.
# Inside your project folder
git init
git add .
git commit -m "Initial commit: StudyFlow semester project"
# Create a new repository on github.com, then run:
git remote add origin https://github.com/YOUR_USERNAME/studyflow.git
git branch -M main
git push -u origin main- Go to vercel.com and sign in with GitHub
- Click "Add New Project" → choose your
studyflowrepo - Build settings (Vercel auto-detects Vite):
- Build command:
npm run build - Output directory:
dist
- Build command:
- Click "Deploy"
- After ~2 minutes you get a live URL like
https://studyflow.vercel.app
- Go to netlify.com → "Import from Git"
- Select your GitHub repo
- Build command:
npm run build - Publish directory:
dist - Click "Deploy" and get a live URL
- Go to render.com → "New Web Service"
- Connect your GitHub repo
- Root directory:
server - Build command:
npm install - Start command:
node index.js - Add environment variable:
PORT=5000 - Click "Create Web Service"
- You will get a backend URL like
https://studyflow-api.onrender.com
In src/services/api.ts, change the API URL:
const API_URL = 'https://studyflow-api.onrender.com/api';Then redeploy the frontend:
git add . && git commit -m "Connect to live backend"
git pushVercel/Netlify will auto-redeploy.
The frontend runs with localStorage when MongoDB is not connected, so you can deploy it instantly and the demo account still works:
- Email:
aarav@college.edu - Password:
student123
- Code pushed to GitHub
- README updated with project details
- Frontend deployed on Vercel/Netlify
- Live link confirmed working
- Demo credentials ready
- Screenshots saved for report (optional)
- The app solves a real student problem: managing study work in one place.
- The board makes task progress easy to explain.
- Task assignment adds a teamwork feature without making the app too complex.
- Group focus sessions make the project feel more useful and unique.
- The code remains beginner-friendly, so it is easy to defend in a viva.
- Connect the frontend directly to the Express API
- Store login sessions with JWT in a real backend flow
- Add reminders or notifications
- Add file attachments for submissions
- Add export to PDF or calendar sync
StudyFlow is a practical semester project that shows full-stack basics in a clean student-style app. It is useful, realistic, and easy to understand, which makes it a strong project for presentation and evaluation.
- Email:
aarav@college.edu - Password:
student123