Questions And Answers App

This Next.js application provides a dashboard to play around with performing CRUD operation on questions and answers.

Authors

• Rohit kumar

Environment Settings

To run this project, node version required v20.11.0

Local Installation

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

Running Tests

To run tests, run the following command

  npm run test

Features

• 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

Component architecture

• Gloabl state management is done via redux store
• Props sharing among components via react context

Screenshots

• Desktop view

• Mobile View

• Mobile View questions modal

• 

• Tootlip

Areas of improvement in future

• 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

🚀 About Me

Learning, Unlearning and Re-learning everyday.