https://github.com/chandan8018/blackcofferassignment
This project is designed to showcase a Graphical Dashboard built with modern technologies including React, Redux, Tailwind CSS, and more. The application features user authentication, a private route system, and a beautiful, responsive design.
https://github.com/chandan8018/blackcofferassignment
aceternity-ui clsx d3 d3-visualization firebase flowbite framer-motion framer-motion---for-animations json2csv material-ui mern-stack
Last synced: 4 months ago
JSON representation
This project is designed to showcase a Graphical Dashboard built with modern technologies including React, Redux, Tailwind CSS, and more. The application features user authentication, a private route system, and a beautiful, responsive design.
- Host: GitHub
- URL: https://github.com/chandan8018/blackcofferassignment
- Owner: Chandan8018
- Created: 2024-06-08T07:02:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-28T14:50:59.000Z (over 1 year ago)
- Last Synced: 2025-03-31T09:18:58.547Z (7 months ago)
- Topics: aceternity-ui, clsx, d3, d3-visualization, firebase, flowbite, framer-motion, framer-motion---for-animations, json2csv, material-ui, mern-stack
- Language: JavaScript
- Homepage: https://blackcofferassignment-fxxz.onrender.com
- Size: 7.94 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BlackCoffer Assignment
Welcome to the BlackCoffer Assignment project! This project is designed to showcase a web application built with modern technologies including React, Redux, Tailwind CSS, and more. The application features user authentication, a private route system, and a beautiful, responsive design.
## Table of Contents
- [Features](#features)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Folder Structure](#folder-structure)
- [Technologies Used](#technologies-used)
- [Contributing](#contributing)
## Features
- **User Authentication**: Secure login and registration with Redux state management.
- **Private Routes**: Protected routes that are accessible only to authenticated users.
- **Responsive Design**: Mobile-first design using Tailwind CSS.
- **Interactive UI**: Smooth animations using Framer Motion.
- **Reusable Components**: Modular and reusable React components.
## Demo
---
---
---
---
---
---
---
## Installation
To run this project locally, follow these steps:
1. **Clone the repository**:
```sh
git clone https://github.com/yourusername/chaintechassignment.git
```
2. **Install dependencies for backend**:
```sh
npm install
```
2. **Start the backend server**:
```sh
npm run dev
```
3. **Install dependencies for frontend**:
```sh
cd frontend
npm install
```
4. **Start the backend server**:
```sh
npm run dev
```
## Usage
Once the server is running, you can visit the application at `http://localhost:7979`. You can navigate through different pages such as Home, Services, About, Contact, Sign In, and Sign Up. Authenticated users can access the Dashboard.
### Home Page
The Home Page is designed to welcome users with an attractive gradient background and interactive elements. It includes links to services and contact pages.
### Sign In / Sign Up
Users can sign in or register for a new account. These forms handle user input and manage state using Redux.
### Dashboard
Accessible only to authenticated users, the Dashboard displays user-specific information and actions.
## Folder Structure
```sh
.
├── public
├── src
│ ├── components
│ │ ├── footer
│ │ │ └── FooterComp.jsx
│ │ ├── header
│ │ │ └── Header.jsx
│ │ ├── privateroute
│ │ │ └── PrivateRoute.jsx
│ │ ├── ui
│ │ │ └── Various UI Components
│ ├── pages
│ │ ├── About.jsx
│ │ ├── Contact.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Home.jsx
│ │ ├── Service.jsx
│ │ ├── SignIn.jsx
│ │ └── SignUp.jsx
│ ├── redux
│ │ ├── theme
│ │ │ └── themeSlice.js
│ │ └── user
│ │ └── userSlice.js
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── .eslintrc.js
├── .gitignore
├── package.json
├── README.md
└── tailwind.config.js