Online Workshop Frontend

A modern frontend for the Online Workshop management system.

---

About

This repository hosts the frontend client for the Online Workshop application. It is built with React to provide a visually engaging user experience for students or users, faculty, and administrators.

The application recently underwent a major UI overhaul, featuring a Glassmorphism(some part) design language, smooth animations, and a fully responsive layout.

---

Key Features

Modern UI/UX

• Glassmorphism Design: Sleek, semi-transparent cards with soft shadows and blur effects.
• Interactive Elements: Smooth hover animations on buttons, inputs, and images.
• Responsive Layout: Seamless experience across Desktop, Tablet, and Mobile devices(Not Perfect).

Robust Authentication

• Secure Login and Signup with "CAPTCHA" protection.
• Forgot Password & Reset Password workflows.
• Role-based redirection (Student, Faculty, Admin).

Dashboard & Management

• Admin: Manage workshops, users, and system settings.
• Faculty: Create workshops and view attendance.
• Student: Browse, register, and attend workshops.

---

Technologies Used

• React: Component-based UI library.
• CSS3: Custom styling with CSS Variables, Flexbox, and Grid.
• Axios: Efficient HTTP client for API communication.
• React Router: Dynamic client-side routing.
• React Toastify: Beautiful notifications.
• Docker: Containerization for consistent deployment.
• GitHub Actions: Automated CI/CD pipelines.

---

Project Structure

src/
├── admincomponents/    # Admin-specific dashboards and tools
├── components/         # Shared auth pages (Login, Signup, Reset Password)
├── facultycomponents/  # Faculty-specific dashboards
├── public/             # Static assets (images, icons)
├── App.js              # Main application router
└── index.css           # Global styles

---

Getting Started

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/udaykiriti/onlineworkshop-frontend.git
   cd Onlineworkshop

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   The app will open at http://localhost:3000.

---

Docker Support

You can also run the application using Docker:

1. Build and run with Docker Compose:

   docker-compose up --build

The application will be available at http://localhost:3000.

---

Contributing

Contributions are welcome! Please fork the repository and create a pull request for any feature enhancements or bug fixes.

---

Made with React