Git Product home page Git Product logo

orbit's Introduction

ReactSecurity - Orbit

Twitter: ryanchenkie

๐Ÿ‘‹ Welcome to Orbit! This is a demo app for learning security for React applications. You can find out more at ReactSecurity.io.

A Look at the App

Here's the dashboard for the app orbit dashboard

For a more in-depth tour, check out this video:

orbit tour

There are two parts to the app in this project: orbit-app and orbit-api. These are the front end React application and the backend Node API respectively.

Install the Dependencies

We need to install dependencies for both orbit-app and orbit-api. Change directories into each and install with npm or yarn.

With npm:

cd orbit-app
npm install
cd ../orbit-api
npm install

With yarn:

cd orbit-app
yarn
cd ../orbit-api
yarn

Set Up the Environment Files

The React app contains a file called .env.local. This file has a single variable called REACT_APP_API_URL which is used to connect to the backend. You can leave this as is.

The backend contains a file called .env.example. This file needs to be renamed to .env and provided with values.

For ATLAS_URL, provide the connection string to your MongoDB Atlas cluster. You can use other MongoDB providers, or even use a local MongoDB connection. Learn how to create a MongoDB instance with Atlas here.

For JWT_SECRET, provide a long, strong, unguessable secret, much like you would in production.

Run the Applications

The React app is built with create-react-app. Run it with the script provided in its package.json file.

cd orbit-app
npm start

The Node API comes with a script in its package.json which allows you to run it in development mode with nodemon.

Open a new terminal window, change directories into the API, and start it up.

cd orbit-api
npm run dev

The Node API will be running at http://localhost:3001.

Navigate to http://localhost:3000 to see the app running!

License

MIT

orbit's People

Contributors

chenkie avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.