Skip to content

ZahidNoor7/nextion-test

Repository files navigation

React Redux Authentication and Product Listing App

This is a React application with Redux state management, user authentication, serverless functions, and a product listing feature.

Table of Contents

Features

  • User authentication (sign up, log in, log out).
  • User dashboard with personalized information.
  • Global state management using Redux.
  • Serverless functions for backend interactions.
  • Product listing page with pagination.
  • Product details page with additional information.
  • TypeScript integration for static typing.
  • Bonus features include form validation, error handling, and a visually appealing UI.

Technologies Used

  • React
  • Redux
  • TypeScript
  • React Router
  • Auth0 Authentication Service
  • Serverless Functions
  • [Dummyjson API]

Installation

  1. Clone the repository.
  2. Run npm install to install dependencies.

Configuration

  1. Set up your Auth0 Authentication Service and obtain API keys.
  2. Configure serverless function environment variables.
  3. Update configuration files with your API keys and other required information.

Usage

  1. Run npm start to start the development server.
  2. Open the app in your browser at http://localhost:3000.

Folder Structure

/src /components /containers /redux /services /serverless /styles

  • Customize the folder structure based on your project needs.

Authentication

  • Use Auth0 Authentication Service for user sign up, log in, and log out.
  • Secure specific routes to be accessible only by authenticated users.

State Management

  • Redux is used for managing global application state.
  • State includes user authentication status and user-related data.

Serverless Functions

  • Utilize serverless functions for backend functionalities.
  • Fetch additional user-specific data and product data from the dummyjson API.

Product Listing Page

  • Display a paginated list of products with names, prices, and images.
  • Implement pagination to navigate through different pages of products.

Product Details Page

  • Allow users to click on a product to view detailed information.
  • Display additional details about the selected product.

TypeScript Integration

  • Utilize TypeScript for static typing throughout the entire project.

Bonus Features

  • Implement form validation for sign-up and login forms.
  • Include error handling for authentication, API calls, and form submissions.
  • Create a visually appealing and responsive user interface.

Contributing

Feel free to contribute by opening issues or submitting pull requests.

License

This project is licensed under the MIT License.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published