Table of Contents
|
This application is designed to manage properties and reservations. Users can register properties, schedule reservations, and add prices that can be charged per day. The app features a dashboard where users can see monthly revenue and compare it with previous months. |
- React
- NextJS
- Redux
- Typescript
- Jest
- JSON Server / JSON Server Auth
- react-hook-form
- Zod
- Radix-ui
- Eslint
- Node > 18
- Yarn (preferable)
yarn install
yarn devOpen a new terminal and run the backend mocking API:
yarn server:runAfter running, open the app on the home page where a guide explains how to use the features.
Basic Features
- Home page with demos of how to use the app.
- Create Account and Sign In integrated with json-server-auth.
- Dashboard Page
- Users can create, read, update, and delete:
- Properties
- Booking Reservations
- Booking stats
- Users can create, read, update, and delete:
- Use context API for changing themes.
- Re-work pricing as it may vary based on the day/month.
- Implement block periods.
- Allow multi-account access with different properties.
- Refactor the app router to:
- Use Redux for globally shared, mutable data only.
- Use Next.js state (search params, route parameters, form state, etc.), React context, and React hooks for other state management.
- Define guest limits per property and ensure they are not exceeded when creating/updating bookings.
- Create a backend app.
- State Management: Using Redux for application state.
- Routing: Next.js navigation.
- API/Data Fetching:
- Auth data managed through Redux and saved in localStorage.
- API calls handled by json-server with json-server-auth to simulate a REST API.
- Styling:
- Using Tailwind CSS.
- Radix UI for foundational components.
- Performance:
- Using 'use client' for components that require client-side features.
- Removing 'use client' where possible for faster rendering with SSR.
- Error Handling: Using Zod schema validation to prevent submission of invalid data.
- Testing: Using Jest to ensure the app functions as expected.
- Code Quality: Eslint for code quality.
- User Experience: Responsive design for smaller devices, with a different calendar view for mobile to ensure responsiveness.
This project is licensed under the MIT license. Feel free to edit and distribute this template as you like.
See LICENSE for more information.
Thanks to these awesome resources used during development: