One Cloud
Deployed at https://onecloud.netlify.app/

Table of Contents

1. Getting Started
   • Prerequisites
   • Installation
2. About The Project
   • Introduction
   • Implementation
   • Technology Stack
3. License
4. Contact

Tasks to be completed

• Sign in and Signup functionality for users.
• Create a folder with the user’s name on the server or cloud of your choice(preferred).
• Give users upload, update, delete & share functionality for music, image, and video files.
• Compelling and Responsive UI.
• Push code on GitHub.
• Deploy the website in production mode.
• Asynchronous solution.
• No external libraries used which give complete functionalities which are implemented.
• A well-baked README file.
• Project setup with a simple command.
• A concise project structure with configurations.

About The Project

Introduction

A project that allows users to upload, update, delete & share music, image, and video files with required authorisation and authentication. A folder with the user’s name on the AWS cloud is created to segregate files from different users.

Implementation:

On the client side, the web pages were implemented using ReactJs as a frontend framework.

On Server side, NodeJs is used as a runtime environment, with Express as a framework and MongoDB Atlas as a cloud database.

AWS has been used as a data hosting service for audio, image and video files.

The server is deployed on Heroku and client is deployed on Netlify.

Technology Stack:

• Frontend
  • ReactJS
  • CSS
  • JavaScript
  • Material UI
• Backend
  • NodeJS
  • ExpressJS
• Database
  • MongoDB
• Data Hosting Service
  • AWS
• Deployment Services
  • Heroku
  • Netlify

File structure

client - Holds the client application

• public - This holds all of our static files

• src

  • actions - This folder holds actions to be dispatched

  • api - This folder holds api integration with the server side of application

  • components - This folder holds all of the different components that make up the frontend

  • constants - These represent action types for reducers

  • reducers - These represent the usage of redux.js for global store

  • App.js - This is what renders all of our browser routes and different views

  • index.js - This is what renders the react app by rendering App.js

• package.json - Defines npm behaviors and packages for the client

server - Holds the server application

• controllers - These hold all of the callback functions that each route will call

• helpers - This holds multer configuration for file upload

• middleware - This holds authentication middleware

• models - This holds all of our data models

• routes - This holds all of our HTTP to URL path associations for each unique url

• upload - This folder is used as a temporary storage for uploaded file

• index.js - Defines npm behaviors and packages for the client

• .env - This holds our configuration files, like mongoDB uri

package.json - Defines npm behaviors

.gitignore - Tells git which files to ignore

Getting Started

Prerequisites

• NodeJS
• NPM
• MongoDB Atlas
• AWS S3
• IDE(Visual Code Studio)
• Git

Installation

1. Clone the repo

   git clone https://github.com/anmolsahu2k/One-Cloud.git
   

2. Install NPM packages in client side

   cd client
   npm install
   

3. Install NPM packages in server side

   cd server
   npm install
   

4. Enter your credentials in '.env'

    Check env.example file to configure environment variables 
   

To Run

1. Run client side

   cd client
   npm start
   

2. Run server side

   cd server
   npm start
   

3. Open application on brower- https://localhost:3000

Screenshots

SignUp Page-

SignIn Page-

Upload and View files-

License

MIT License ⚖️

Contact

• Anmol Sahu - [email protected]

Project Link: https://github.com/anmolsahu2k/One-Cloud

Made as a part of QuantaVid LLC internship task.