This is a Next.js project bootstrapped with create-next-app.

Getting Started

To set up the project locally, follow these steps:

1. Clone this repository.
2. Navigate to the project directory in your terminal.
3. Run npm install to install the project dependencies.
4. Use npm run dev to start the development server.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Folder Structure

App Folder Approach

We've adopted the "App folder" approach, where the main application code resides in an App folder. This approach offers several advantages:

• Better Organization: All related files are grouped together under the App folder, leading to a cleaner and more organized project structure.
• Scalability: As the project grows, it's easier to manage and find specific files.
• Component Sharing: Components, hooks, and types can be shared more effectively within the App folder.

Learn more about the App folder approach.

Project Structure

• App/Home: Demonstrates how routing works within the App folder structure.
• App/Pension-estimator: Contains the Layout.tsx, which is shared among multiple pages for consistent layout.
• components: all application-generic components.
• hooks: Contains business logic of the application using custom hooks.
• types: Defines TypeScript types used throughout the application.
• store: Utilizes Zustand for lightweight state management. Comparison with other state management libraries. works way better the redux or recoil
• lib: Includes styled components and their functionality configurations. Extendable with Twin.micro. Learn about Twin.micro.

Libraries Used

• flowbite-react: Provides components for the UI. Link to Flowbite-React.
• react-hook-form: Library for managing form state and validations. Link to react-hook-form.
• superstruct: Enhances typing and validation for forms. Link to superstruct.
• recharts: Used for creating charts within the application. Link to Recharts.
• Tailwindcss: Used for giving the styles to the application. Link to TailwindCss.

Available Scripts

In the project directory, you can run the following scripts:

• npm run dev: Starts the development server.
• npm run build: Builds the production-ready application.
• npm start: Starts the production server.
• npm run lint: Runs linting for code quality checks.
• npm run test: Runs Test to test the apllication.

Writing Tests

Unit test cases only written to one hook file, which is useSavingsProgressEstimationInYears Buisness logic should be seprate like this hook file, thats how it's easy to test

Twin.macro Integration

TODO: Explain how Twin.macro is integrated into the project.

License

This project is licensed under the MIT License.