Folder List App

It is a full-stack app almost like a todo list app but with extended features. We can use to keep our todo list separately inside different folders like keeping our files in different directories. Fully responsive, mobile first aproach. Build with MERN stack. Hosted with Heroku.

Get started

You can see this project live here.

Build with

These were the main technologies used in this project.

• Mongodb - Nosql document based database
• ExpressJS - NodeJS framework for web and mobile applications
• React - JavaScript library for building user interfaces
• Redux - A Predictable State Container for JS Apps
• NodeJS - JavaScript runtime engine built on Chrome's V8 JavaScript engine a that runs javascript outside the web browser

some other technologies are,

• PassportJS - Passport is authentication middleware for Node.js
• react-bootstrap - The most popular front-end framework for UI components
• Bootstrap - The most popular front-end framework

Local setup

Client is inside the server root directory therefore two server will be running at the same time at same root level directory. I have used concurrently so both the servers will start with one script.

Prerequisites

Install node, npm and git .

Server setup

git clone https://github.com/ramankarki/folder-list-app.git

cd folder-list-app

npm install nodemon -g

npm install

Create a config.env file in root and add some env variables.

NODE_ENV=development

COOKIE_KEY=random string whatever you want
DBSTRING=your mongodb database string

// I have used google oauth2.0 for authentication and passport-js for handeling oauth flow

GOOGLE_CLIENT_ID=google concent screen client id
GOOGLE_SECRET_ID=google concent screen secret key

Create a config folder in root and dev.js file inside config folder.

module.exports = {
  dbstring:
    "your mongodb database string",
  cookieKey: "random string whatever you want",
  googleClientID:
    "google concent screen client id",
  googleSecretID: "google concent screen secret key",
};

Client setup

cd client

npm install

Now you are done with you setup and can start your client and server at once

npm run dev

Now it should open homepage of this folder list app on your default browser