This app showcases a blend of modern web technologies and best practices, emphasizing a strongly typed and secure approach to web development.
- CRUD Operations: View, create, edit, and delete user records directly from a responsive data table.
- Tech Stack: Built with Next.js, React, TypeScript, Ant Design (AntD), React Hook Form, Recoil, and Prisma, ensuring a type-safe and robust application.
- Dynamic Data Fetching: Leverages Next.js's Static-Site Generation (SSG) with on-demand cache revalidation for up-to-date data presentation without sacrificing performance.
- State Management: Utilizes Recoil for efficient global state management across the app, enabling dynamic updates and consistent state across components.
- Form Handling and Validation: Integrates React Hook Form with AntD for fluid form experiences and employs Yup and Zod for comprehensive client and server-side validation.
- Server Actions: Employs Next.js server actions for server-side data processing and validation, ensuring data integrity and security.
- Session Storage: Retains query parameters (like sorting, pagination, and filters) in session storage for a persistent user experience across page refreshes and navigation.
- Relational Data Modeling: Features a relational database design with Prisma, modeling users and countries with a many-to-one relationship.
- Type Safety: Enforces a strongly typed codebase using TypeScript, enhancing code reliability and maintainability.
- User-Friendly UI: Offers an ergonomic and intuitive user interface, designed with AntD components for a seamless user experience.
- Notification System: Integrates a real-time notification system, providing immediate visual feedback for user actions, enhancing the interactive experience.
This app is pre-seeded with sample data for immediate exploration. Upon the first launch, it checks for the presence of the SQLite database; if absent, it seeds the database with initial data, providing a ready-to-use setup.
- Clone the repository to your local machine
- Navigate to the project directory and run
npm install
to install all required dependencies. - To start the app in development mode, run
npm run dev
. This allows for hot reloading and immediate feedback on code changes. - For a more production-like experience, it is encouraged to build the app and run it in production mode. To do this, first build the app using
npm run build
- Once the build process is complete, start the app in production mode by running
npm run start
. - While in production mode, inspect which routes are dynamically generated and which are statically generated for a comprehensive understanding of the app's rendering behavior.
Important
If any error is received when first trying to run the app with npm install
, npm run build
, npm run start
, then you might need to configure the prisma client.
- Copy schema.prisma from /prisma folder aywhere outside the project folder.
- Delete /prisma folder.
- Run
npx prisma init --datasource-provider sqlite
command. - Replace newly generated schema.prisma file from /prisma folder with the old schema.prisma file (this is where the entities are defined).
- Run
npx prisma migrate dev
and give it a name. - Run
npm run dev
for development mode ornpm run build
andnpm run start
for production mode.
- Frontend: React, Next.js (App router), AntD, React Hook Form, Recoil
- Backend: Next.js API routes, Prisma ORM
- Database: SQLite for ease of use and quick setup
- Validation: Yup (client-side), Zod (server-side)
- Styling: Styling is mostly done through AntD's component base. Since the implication in actual styling was minimal, inline styles were used in favor of scss files
- Dynamic and Static Rendering: Combines the best of both worlds by using SSG for initial page loads and React's client-side capabilities for dynamic updates.
- Session Persistence: Manages session storage to maintain user state across the app, providing a consistent and reliable user experience.
- Adaptive URL Management: Dynamically updates URLs with query parameters reflecting the current app state, offering clear navigation cues to the user.
- Adaptable Codebase: Demonstrates best practices in web development, with a focus on adaptability, scalability, and maintainability.
Important
This app is my intellectual property, Mihaiu Sorin-Ionut, and serves as a demonstration of my professional skills, adaptability, and commitment to delivering high-quality software solutions. It showcases modern web development practices, emphasizing type safety, user experience, and robust architecture.