Personal Planner - Student Dashboard

Inspiration

I wanted to get started with projects and wanted to make sure the project was something that would either be very interesting to me or useful in my personal life. I wanted a simple place to manage different parts of my student life in one place instead of using several different apps, so I decided to build a dashboard.

What it does

Personal Planner is a student dashboard that helps manage tasks, habits, notes, workouts, and schedules in one place. It supports adding tasks and habits, marking them as completed, saving notes and schedule items, and showing progress for tasks and habits.

How I built it

Deliverable 1 focused on building the dashboard UI and layout. Deliverable 2 added API routes and database support. Deliverable 3 added task completion, habit tracking, and progress display.

I started by building the dashboard layout and separate components. After that, I added React to store typed input and displayed data. Then I added Next.js API routes to save and load data. After that, I added MongoDB support for persistence. Finally, I improved the task and habit sections with completion and progress tracking.

Challenges I ran into

One challenge was trying to figure out full stack development from scratch. Another challenge was learning how to choose from different tech stacks and understand what each one does. I also had to spend time trying to understand my code better when using references and help. On top of that, I was also learning Git skills while building the project.

Accomplishments that I'm proud of

I am proud of turning an idea into a proper implementation. I am also proud of being mostly finished with my first ever project. Another accomplishment is keeping the project simple while still making it decently functional.

What I learned

I learned more about React, Next.js, MongoDB, Git, HTML/CSS, and JavaScript/TypeScript. I also learned more about how frontend, backend, and databases connect in a full-stack project.

What's next for Personal Planner - Student Dashboard

I want to make it more functional by adding deletion and editing of items. I also want to improve the frontend and UI so it looks closer to what I originally wanted. After that, I may add more advanced features.

Built With

• css
• mongodb
• next.js
• react
• typescript