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: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/luovtyrell/react-onboarding-digital
- Owner: Luovtyrell
- Created: 2024-06-18T09:26:01.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-25T16:49:33.000Z (11 months ago)
- Last Synced: 2025-01-06T01:10:00.859Z (5 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
      
### 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
### Tablet
Click
### Mobile
Click
## Author
[](https://www.linkedin.com/in/luovtyrell/)
- React, It Academy. [@Luovtyrell](https://www.github.com/Luovtyrell)