User Journey Application

This project is a React-based web application designed to simulate a user journey through a basic application process. The application showcases skills in making API calls, managing state with Redux or local storage, and implementing specific design requirements.

Table of Contents

• Objective
• Features
• Tech Stack
• Installation
• ProjectSetup
• Usage
  • Landing Page
  • Application Page
  • Save & Exit Button
  • Summary Page
• API Integration
• State Management
• Evaluation Criteria
• Design
• License

---

Objective

The objective of this application is to create a simple user journey that includes navigating through multiple pages, making API calls, and preserving the user’s state across pages.

Features

• Landing Page: A starting point for users with a button to initiate the application process.
• Application Page: Fetches user data from a remote API and displays it.
• Save & Exit Button: Allows users to save their progress and view a summary.
• Summary Page: Displays a summary of the user’s application data and offers an option to continue the application.

ProjectSetup

To get started with the project, clone this repository and install the necessary dependencies.

git clone <repository-url>
cd <project-folder>
npm install 
or
yarn 

Create a .env file:

VITE_GRAPHQL_ENDPOINT=add-graphql-api-url
VITE_AUTH_TOKEN=add-auth-token-here

Run the application

npm run dev
or
yarn dev

Tech Stack

The project is built using the following technologies and libraries:

Frontend Framework

• React: A JavaScript library for building user interfaces. (version ^18.3.1)
• React DOM: Provides DOM-specific methods for React. (version ^18.3.1)

State Management

• Redux Toolkit: Simplifies state management with features like createSlice and createAsyncThunk. (version ^2.3.0)
• React Redux: Official React bindings for Redux. (version ^9.1.2)

Routing

• React Router: Declarative routing for React applications. (version ^6.28.0)
• React Router DOM: DOM bindings for React Router. (version ^6.28.0)

UI Framework

• Material-UI (MUI): Components and design system for React apps.
  • MUI Material: Core Material-UI components. (version ^6.1.7)
  • MUI Icons: Material Design icons for React. (version ^6.1.7)
  • MUI Styled Engine: Integrates Material-UI with styled-components. (version ^6.1.7)

Styling

• Emotion: A CSS-in-JS library for styling components.
  • Emotion React: Emotion's React bindings. (version ^11.13.3)
  • Emotion Styled: Emotion's styled component library. (version ^11.13.0)
• Styled Components: CSS-in-JS for building styled React components. (version ^6.1.13)

GraphQL

• Apollo Client: A comprehensive GraphQL client for React. (version ^3.11.10)
• GraphQL: Query language for APIs. (version ^16.9.0)

Environment Variables

• dotenv: Loads environment variables from a .env file. (version ^16.4.5)

Build Tool

• Vite: Fast build tool and development server. (version ^5.4.10)

TypeScript

• TypeScript: Adds type safety and modern JavaScript features. (version ~5.6.2)
• @types/react: Type definitions for React. (version ^18.3.12)
• @types/react-dom: Type definitions for React DOM. (version ^18.3.1)

Linting and Code Quality

• ESLint: A pluggable JavaScript linter. (version ^9.13.0)
  • @eslint/js: Core ESLint functionality. (version ^9.13.0)
  • eslint-plugin-react-hooks: Rules for React hooks. (version ^5.0.0)
  • eslint-plugin-react-refresh: Linting rules for React Refresh. (version ^0.4.14)
• Globals: Provides a list of global variables for linting. (version ^15.11.0)

---

License

This project is licensed under the MIT License.

---