https://github.com/srikanthnayak1/react-assignment
https://github.com/srikanthnayak1/react-assignment
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/srikanthnayak1/react-assignment
- Owner: SrikanthNayak1
- Created: 2025-02-19T05:23:48.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-19T06:06:10.000Z (4 months ago)
- Last Synced: 2025-02-19T06:28:53.177Z (4 months ago)
- Language: TypeScript
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.txt
Awesome Lists containing this project
README
# 🚀 Live React Project Assignment Link given below
https://cerebrascoder.com/p/311563
https://github.com/SrikanthNayak1/React-Assignment/blob/75a99dd0e56b961a7f9d213b48b52a1300fd1ec5/Screenshot%20(17).png
This project is a **React-based web application** that features a **counter**, **user data form**, and **rich text editor**, along with **smooth animations**, **data persistence**, **routing**, and optional **dashboard visualization**.
---
## 📋 Key Features
### 🧮 Counter Component
- 🔼 **Increment**, 🔽 **Decrement**, and 🔄 **Reset** buttons.
- 🎨 **Dynamic background height** changes with count (Bezier curve-like animation).
- 🟢 **React Spring** for smooth animations.
- ⬅️ **Reset** button restores background to default.
### 📝 User Data Form
- 🧑💻 Fields: **Name, Address, Email, Phone**.
- 🆔 **Autogenerate User ID**.
- 💾 **Local Storage / RTK** for data persistence.
- ⚠️ **Unsaved changes alert** when closing the browser with unsaved form data.
### 🖋️ Rich Text Editor
- 📝 **Visualize user data in rich text format**.
- 🎨 **Text Formatting Options**: Bold, Italic, Underline, Lists.
- 💾 **Data Persistence**.
### 📊 Optional Dashboard
- 👤 **User Profile Visuals**.
- 📈 **Trends Visualization using React Charts**.
### 🔐 Authentication (Optional)
- 🔑 **Google Sign-In**.
- 🏠 **Private & Public Routes** with Mock Authentication.
### 🛣️ Routing
- 🧭 **React Router** for multi-page navigation.
---
## 🛠️ Tech Stack
- ⚛️ **React + TypeScript**
- 🧑🎨 **MUI / Chakra UI / Next UI** (Any UI Library)
- 🌿 **React Spring** (Animations)
- 🛣️ **React Router** (Routing)
- 📝 **Draft.js & react-draft-wysiwyg** (Rich Text Editor)
- 📈 **React Chart.js** (Data Visualization)
- 🧑💻 **Redux Toolkit** (Optional State Management)
---
## 🏗️ Installation Guide
```bash
# Create a React Vite project
npm create vite@latest react-app
cd react-app
# Install dependencies
npm install
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
npm install @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled framer-motion
npm install @react-spring/web
npm install react-router-dom
npm install draft-js react-draft-wysiwyg
npm install react-redux @reduxjs/toolkit
npm install react-chartjs-2 chart.js
```
---
## ▶️ Running the Application
```bash
npm run dev
```
---
## 📂 Project Structure
```
src
│
├── components
│ ├── Counter.tsx
│ ├── UserDataForm.tsx
│ ├── RichTextEditor.tsx
│ └── Dashboard.tsx
│
├── router.tsx
└── App.tsx
```
---
## 🚀 Deployment
Deploy your app on **GitHub Pages**, **Vercel**, or **Netlify**.
### 🌐 Hosting Platforms
- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/)
- [GitHub Pages](https://pages.github.com/)
---
## 🤝 Contributing
Contributions are welcome! Feel free to fork this repo and create a pull request with your improvements.
---
## 📜 License
This project is licensed under the **MIT License**.
---
## ✨ Author
**[Your Name]** - React Developer
🌐 [GitHub Profile](https://github.com/SrikanthNayak1) | 🔗 [LinkedIn](https://www.linkedin.com/in/srikanthsabavath/)