Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luovtyrell/react-onboarding-digital

A React Card component dynamically displays content based on props, supporting forward and backward step navigation with responsive design. It includes a visual current step indicator for direct navigation and smooth animations between steps.
https://github.com/luovtyrell/react-onboarding-digital

bootstrap5 prop-types react vite vitest

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/luovtyrell/react-onboarding-digital
Owner: Luovtyrell
Created: 2024-06-18T09:26:01.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-06-25T16:49:33.000Z (6 months ago)
Last Synced: 2024-06-25T19:00:22.740Z (6 months ago)
Topics: bootstrap5, prop-types, react, vite, vitest
Language: JavaScript
Homepage:
Size: 1.5 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 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](#react-onboarding-digital)

2. [Description](#description)

3. [Key Features](#key-features)

4. [Technologies Used](#technologies-used)

5. [Project Structure](#project-structure)

6. [Project Setup](#project-setup)

   - [Prerequisites](#prerequisites)

   - [Installation](#installation)

   - [Running Tests](#running-tests)

7. [Layout Images](#layout-images)

   - [Web](#web)

   - [Tablet](#tablet)

   - [Mobile](#mobile)

8. [Author](#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

![React Badge](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=000&style=for-the-badge) ![PropTypes](https://img.shields.io/badge/PropTypes-667DF2?style=for-the-badge) ![Vite Badge](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff&style=for-the-badge) ![Vitest Badge](https://img.shields.io/badge/Vitest-6E9F18?logo=vitest&logoColor=fff&style=for-the-badge) ![Bootstrap Badge](https://img.shields.io/badge/Bootstrap-7952B3?logo=bootstrap&logoColor=fff&style=for-the-badge) ![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000&style=for-the-badge) ![CSS3 Badge](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=fff&style=for-the-badge)

### 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:

   ```bash

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

   cd React-onboarding-digital

   ```

2. Install dependencies:

   ```bash

   npm install 

   ```

3. Start the development server:

   ```bash

   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`

```bash

npm run test

```

## Layout images

### Web

  Click

![web](./public/sample%20footage/web.png)

![web](./public/sample%20footage/web2.png)

![web](./public/sample%20footage/web3.png)

  

### Tablet

  Click

![tablet](./public/sample%20footage/tablet.png)

  

### Mobile

  Click

![Mobile ](./public/sample%20footage/mobile.png)

  

## Author

[![Made by - Lucía Mª Ordoñez Vilanova](https://img.shields.io/badge/Made_by-Lucía_Mª_Ordoñez_Vilanova-be9dfa?style=for-the-badge)](https://www.linkedin.com/in/luovtyrell/) 

- React, It Academy. [@Luovtyrell](https://www.github.com/Luovtyrell)