Git Product home page Git Product logo

glowbal's Introduction


Glowbal

An ePortfolio web app built on React and Express

๐ŸŽ‰ Getting Started

๐Ÿ  Local Installation

These instructions will help you get a copy of the project up and running for development and testing. This project runs on an Express backend and React frontend with TypeScript. You will need npm and yarn installed to start.

๐Ÿคซ Environment Variables

Both the frontend and backend make use of environment variables that will need to be present out before building.

In both the client and api directories, there is an example .example.env which should be filled out and renamed to .env

api/.env

# Server settings
NODE_ENV=development
SERVER_PORT=5000

# Authentication settings
EMAIL_KEY=https://example.com/email
AUTH0_AUDIENCE=
AUTH0_ISSUER=
JWKS_URI=

# SSL settings
SSL_CRT_FILE=../server.cert
SSL_KEY_FILE=../server.key

# Database settings
DB_ENDPOINT=
DB_NAME=
DB_USERNAME=
DB_PASSWORD=

# AWS
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_BUCKET_NAME=

client/.env

# API settings
REACT_APP_API_URL=https://localhost:5000/api/

# Authentication settings
REACT_APP_AUTH0_DOMAIN=
REACT_APP_AUTH0_CLIENT_ID=
REACT_AUDIENCE=

The keys used in the default deployment can be found in the #keys channel in Slack.

๐Ÿ”’ SSL certificate

Before running the API, you will need an SSL certificate.

In the root directory, start by creating a certificate:

openssl req -x509 -newkey rsa:4096 -keyout server.key -out server.cert -days 365 -nodes

To specify the certificates, in api, add the following lines to the .env:

SSL_CRT_FILE=../server.cert
SSL_KEY_FILE=../server.key

Self signed SSL certificates may be rejected by applications for dev. Some example workarounds:

In Chrome, into the address bar type, and enable:
	chrome://flags/#allow-insecure-localhost

In Postman, disable SSL verification

๐Ÿ–ฅ API Server: Express

First start by installing and running the Express backend in the api directory.

In the root directory, start by installing the dependent node modules:

cd api
npm install

To start the server, run:

npm start

Alternatively, you can run the server with hot loading with nodemon

nodemon

โš›๏ธ Client: React

First start by installing and running the React frontend in the client directory.

cd client
yarn install

In the client directory, you can start the React app by running:

yarn start

Once you are done, the app should automatically launch, however, the app can be found at:

localhost:3000

๐Ÿ“ Documentation

๐ŸŽจ Components: Storybook

The frontend React components are documented using Storybook

To start Storybook, in the client folder, run:

yarn storybook

In should open automatically, however the app can be found at:

localhost:6006

Note that some components will require the use of the API so you should also run the API server locally at the same time

๐Ÿ’ป API: Stoplight

The backend routes are documented using Stoplight

It is hosted online at the above link.

๐Ÿ™‹ Contributors

Sean Gayler
Sean Gayler
Nathan Harvey
Nathan Harvey
Edward Hinrichsen
Edward Hinrichsen
Taylor Johnston
Taylor Johnston
Nathan Harvey
Kevin Kim

glowbal's People

Contributors

taylor-johnston avatar seangayler avatar neatht avatar kwhk avatar edhinrichsen 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.