Shorts Frontend

Overview

This project is the frontend for a "shorts" application, allowing users to interact with writers, shorts, and reviews. It is built using React and styled with Material-UI. The project is bundled and served using Vite.

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/renad-lab/shorts-frontend.git
   cd shorts-frontend

2. Install dependencies:

   npm install

Running the Application

To start the development server, run:

npm run dev

Deployment

• Backend: Deployed on Render.(https://shorts-backend.onrender.com)
• Frontend: Deployed on Netlify.(https://melodious-otter-0e352a.netlify.app)

Technologies Used

• React: JavaScript library for building user interfaces.
• Material-UI: React components for faster and easier web development.
• Vite: Next generation frontend tooling.
• Firebase: Backend-as-a-Service for building web and mobile applications.
• React Router: Declarative routing for React.
• Slick Carousel: A responsive carousel component for React.

Project Structure

The project structure follows a typical React project layout:

shorts-frontend/
├── public/                 # Public assets
├── src/                    # Source code
│   ├── assets/             # Assets like images, fonts, etc.
│   ├── components/         # Reusable React components
│   ├── pages/              # Page components
│   ├── styles/             # Global styles
│   ├── App.jsx             # Main application component
│   ├── index.jsx           # Entry point
├── .eslintrc.js            # ESLint configuration
├── .gitignore              # Git ignore file
├── package.json            # Project metadata and dependencies
├── README.md               # Project documentation
├── vite.config.js          # Vite configuration