Table of Contents
Era Planner is the Front-end project that have concept of managing daily life. There are features to manage your events such as calendar, daily journal and to-do list. The project was created using Next.js, Bootstrap and FullCalendar.js. Unit Testing with Jest.js
There are several app features you can use:
- Calendar feature :
Organize and plan the event in the calendar. They will alert you at the Home page 3 days before the event will occur. - Daily Journal feature :
Take a note from the story or lecture and review it in the future. Using the local storage to load and manage the journal data. - To-do List feature:
Forgot to do something you need to? Note some lists and do it to clear. Using the local storage to load and manage the to-do list data. - Alert feature:
When you finally enter the home page. If you have some events that will going to occur in 3 days. It will start to alert.
When you clicked the important button such as Delete Button, It will also generated the alert before the action. - Light/Dark Mode feature:
There is a theme switcher at the navbar. When toggle the button, the theme will be switch to its color theme.
- Next.js 14
- Bootstrap 5
- FullCalendar.js
- Jest.js
First you need to setting up your locally folder. To get a local copy up and running follow these simple example steps.
This is how to list things you need to use the software and how to install them via npm.
- npm
npm install npm@latest -g
Following the guide from below through your terminal.
- Clone the repo
git clone https://github.com/Celesca/FinalProject-Frontend-DevInit
- Install NPM packages
npm install
- Move to folder directory
cd FinalProject-Frontend-DevInit - Run the project
npm run dev
Using Figma to design the prototype of this web application to follows and adjust them. The main keys of this web application design including:
- Easy to use and minimal theme
- Convenience and faster. No complex UI
- Monotone and basic color theme
- Have Light/Dark mode to prefer UX
- No complex shape and no animation
Here is the link you can check in Figma design prototype. There's a 2 flow including Phone and Desktop version.
Figma : EraPlanner Prototype
- Description: Successfully loads and displays accurate information on the home page.
- Description: Successfully loads and displays the current calendar on the calendar page.
- Description: Loads and displays the daily journal page, presenting a form for writing entries.
- Description: Clicking on a To-Do List item opens the edit page for that item.
- Description: Adding a new activity in the calendar works correctly.
- Description: The To-Do search function within the application operates as expected.
- Description: The home page displays correctly on mobile screen sizes.
- Description: The calendar page adapts appropriately to tablet screen sizes.
- Description: The daily journal page shows suitable rendering on large screens.
- Description: Successfully saves data in the daily journal form, and retrieval of that data works as intended.
- Description: Creation and deletion of items in the To-Do List function as expected.
- Description: Theme changes and user-specific settings are applied and saved correctly.
- Description: The functionality of notifications or reminders is tested and verified.
- Automate Testing will cover "Page Load and Rendering" section in test cases. Because Jest.js can used for testing the rendering page.
- You can run the following code to perform the unit testing in this projects.
npm test- Recording the testing and checked all the test cases.
- Test Report Docs : FinalProject_DevInit_TestReport
- Video : FinalProject_DevInit_Video
Distributed under the MIT License. See LICENSE.txt for more information.
Linkedin - Sawit Koseeyaumporn
Project Link: EraPlanner