This Next.js application provides a dashboard to play around with performing CRUD operation on questions and answers.
To run this project, node version required
v20.11.0
Clone the project
git clone https://github.com/kumar111222rohit/questions-and-answers.git
Go to the project directory
cd questions-and-answers
Install dependencies
npm install or npm i
Build the app
npm run build
Start the app
npm run dev
The app should run on http://localhost:3000
To run tests, run the following command
npm run test
-
Built on Next.js
-
Responsive for mobile and desktop
-
Accessibility: Built with WCAG support for inclusive user experience.
-
Type Safety: Ensured by TypeScript for enhanced code maintainability.
-
React Framework: Utilizes React for efficient component-based development.
-
Reusable Components: Promotes modularity and code reusability.
-
Localization Ready: Supports potential internationalization efforts.
-
Client-Side Rendering (CSR): Enables dynamic updates and interactivity.
-
Code Splitting: Optimizes bundle size and loading time.
-
Linting and Prettier: Enforces consistent code style and formatting.
-
React redux for global state managament
-
React Context: Provides centralized state management among components.
-
Functional Components and Hooks: Leverages modern React features for component composition.
-
API Integration: Seamlessly fetches data from the Rick and Morty API.
-
Code Modularization: Organizes code into logical modules for better readability.
-
Error Handling: Implements robust error handling mechanisms.
-
Unit test for components and APIs setup on jest and react testing library
- Gloabl state management is done via redux store
- Props sharing among components via react context
![Screenshot 2024-03-29 at 15 16 10](https://private-user-images.githubusercontent.com/8679506/318067015-70b813f8-faa7-4291-8d5a-10042f410300.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwNDc2MjIsIm5iZiI6MTczOTA0NzMyMiwicGF0aCI6Ii84Njc5NTA2LzMxODA2NzAxNS03MGI4MTNmOC1mYWE3LTQyOTEtOGQ1YS0xMDA0MmY0MTAzMDAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDhUMjA0MjAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGY1ZjUzYjA2ZTIyYjE2MDVjN2U0M2NhNjAyYjQxMmJlZDUwY2IzNzYzNDBkZDU4NzI3MWUzMmQ0N2VjMzA4OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.4k025CllJh69fCsNhFbHCMLEm-EuTLKXWJiaxXtuFP0)
- Do the initial API call on server
- Implement intersection observer to handle infinte list of questions
- add domain level translations support
- add some loaders for API calls
- add some skeleton UI while loading
- add more test coverage as needed
- dark/light mode
Learning, Unlearning and Re-learning everyday.