/mobigicAssignment

Files upload and download assignment

Primary LanguageJavaScript

Frontend README

This is the frontend for Login and register user and upload and down load files, built with HTML, CSS, JavaScript, React, Tailwind CSS, and Axios.

Deployed link

Project Overview

295804901-dcaeda28-c608-4272-96e6-4e08fd34daca

This is file upload page in user succesfully login they will navigate this page user can upload any type of file and user can delete and download only his files

Prerequisites

Before you begin, ensure you have met the following requirements:

  • Node.js installed
  • npm or yarn package manager
  • Other dependencies specified in package.json

Getting Started

Follow these steps to set up and run the project locally:

  1. Clone the repository:

    git clone <repository_url>
  2. Install dependencies:

    cd <project_directory>
    npm install
  3. Configure environment variables:

    Create a .env file in the root directory and provide the necessary variables, such as:

    REACT_APP_BASEURL=<your_backend_base_url>
  4. Run the application:

    npm start

    The application will be running at http://localhost:3000 or another specified port.

Login

To log in, use the following steps:

  1. Navigate to the login page.
  2. Enter your registered email and password.
  3. Click the "Login" button. 4.File upload page

Required Fields for Login:

  • username
  • Password

Registration

To register a new account, use the following steps:

  1. Navigate to the registration page.

  2. Fill in the required fields:

    • Username
    • Password
  3. Click the "Register" button.

Required Fields for Registration:

  • Username

  • Password

Deployment

The project is deployed on Netlify. You can access the live version at Live Demo.

Project Structure

Briefly explain the structure of your project. Highlight key directories and files.

Features

List the key features or functionalities provided by your frontend.

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • React
  • Tailwind CSS
  • Axios for API communication
  • Nodejs,express and mongodb
  • filesystem
  • multer plugin

Folder Structure

Explain the structure of your React components and other key folders.

Styling and Theming

Describe how you handle styling and theming in your project, especially if you use Tailwind CSS.

API Integration

Explain how your frontend interacts with the backend API, including Axios configurations.

Contributing

Specify guidelines for contributing to your project.

License

Specify the license under which your project is distributed.

Acknowledgments

Acknowledge any libraries, tools, or contributors that you want to credit.