This project is a Planner App that is similar to a Bullet Journal. Users can login and be able to add events to a calender, add TODOs to a task list, track progress on tasks, track habits or activities that will be visualized with a pie graph and a mood tracker with journal entries.
- Habit Tracker: Set daily habits and track your progress.
- Event Calendar: Manage and schedule tasks/events seamlessly.
- Journal and Mood Tracker: Reflect on your day and track your moods over time.
- Motivational Reminders: Receive motivational quotes and progress updates.
- Data Visualization: View your activity with interactive charts and graphs.
- Frontend: React, Next.js, Tailwind CSS
- Backend: Next.js API routes, Upstash
- Email Notifications: Resend
- Data Visualization: recharts
- Testing: Storybook, Postman
- Clone the repository:
git clone https://github.com/JenniferT9462/Capstone-level-3.git cd Capstone-level-3 - Install dependencies:
npm install
- Set up environment variables:
RESEND_API_KEY=your-api-key UPSTASH_REDIS_URL=your-redis-url UPSTASH_REDIS_TOKEN=your-redis-token
- Run development server:
npm run dev
- Open http://localhost:3000 to view it in the browser.
- API Testing: Use Postman to test API routes in the
/apifolder. - Component Testing: Run Storybook:
npm run storybook
- Set up main readme with daily logs.
- Draft wireframes and workflows.
- List components and APIs that will be used.
- After mapping out features that I want, it seems that it may be too much to actually accomplish. May have to narrow them down a little.
- Finalize wireframes.
- Finalize APIs
- Updated Readme with wireframes
- Started Habit components
- Installed Storybook
- Storybook was a challenge to install. Next updated to 15 and was not compatible with Storybook. The solution was to install from a solution branch found on Github.
- Add Habit Tracker Page
- Add NavBar component
- Created a story for NavBar
- Habit Tracker Page
- Figuring out how I was going to track the habits on the habit tracker. I decided to add a progress button that adds 1 to the progress count and calculated by dividing the frequency(days) by the progress count.
- Start on HabitTracker Form
- Started Calendar Components
- Events PopUp
- I originally created my calendar on one component. I had to break it down into several components for organization. Getting the event popup was a bit challenging, I set a useState hook for it to handle hiding it until a date on the calendar was clicked/
- Main components: NavBar, Splash page and Welcome page.
- Splash Page
- Welcome Page
- Logo on NavBar
- Figuring out what logo I wanted to use and where to find one that I liked. I ended up using https://iconify.design/ custom brand logo.
- Work on todo components and sidebar that keeps events and todo lists.
- Todos Components
- MoodChart
- MoodCalendar
- The react-calendar was a bit challenging to style. I looked up documentation on the react-calendar npm and it said to add
!importantto certain styles to allow my style rules to work.
- Storybook and other packages that I wanted to use in my project weren't compatible so I may need to downgrade Next to 14 instead of 15.
- Downgrade to Next 14
- Journal Form
- I came into some styling issues with the journal form on the page.
- Decide how I will be saving the user data for my events, todos and journal entries.
- Merge all branches to main
- API Routes to save and get user data
- Update Readme checklist
- Getting my data and API routes to match in data format was a bit challenging. I had to go back to my API routes to insure that the data formats matched.