React-onboarding-digital

Description

This project focuses on building a digital Onboarding experience using React, leveraging fundamental concepts such as components, hooks, and props. The application guides users through a series of steps, each represented by a card containing descriptive text and an accompanying image.

Table of Contents

1. React-onboarding-digital
2. Description
3. Key Features
4. Technologies Used
5. Project Structure
6. Project Setup
   • Prerequisites
   • Installation
   • Running Tests
7. Layout Images
   • Web
   • Tablet
   • Mobile
8. Author

Key Features

• Component-Based Architecture: Utilizes React components for modular and maintainable code.
• State Management with Hooks: Implements useState hook to manage and update the current step in the Onboarding process.
• Props for Data Passing
• Responsive Design: Ensures the application is responsive across various screen sizes using Bootstrap 5.
• Unit Testing with Vitest.
• PropType Validation.

Technologies Used

Project Structure

REACT-ONBOARDING-DIGITAL/
├── node_modules/        # (Generated upon installation)
├── public/
|   ├── sample footage/
├── src/
│   ├── App/
│   │   ├── App.jsx
│   ├── assets/
│   ├── Components/
│   │   ├── Card/
│   │   |     ├── Card.css
│   │   |     ├── Card.jsx
│   │   └── Indicator/
│   │   |     ├── Indicator.css
│   │   |     ├── indicator.jsx
│   ├── Data/
│   │   ├── Data.js
│   └── test/
│       ├── Card.test.jsx
|   └──main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

Project Setup

Prerequisites

• Node.js
• npm (Node Package Manager)

Installation

1. Clone the repository:

   git clone https://github.com/Luovtyrell/React-onboarding-digital.git
   cd React-onboarding-digital

2. Install dependencies:

   npm install 

3. Start the development server:

   npm run dev 

Running Tests

The project uses Vitest for testing. To run tests, use the following command and see the results in your terminal`

npm run test

Layout images

Web

Click

Tablet

Click

Mobile

Click

Author

• React, It Academy. @Luovtyrell