Skip to content
JamesG IPO - Built with React and Apollo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
config
server
.env
.env.example
.eslintignore
.eslintrc.js
.gitignore
LICENSE.md
Procfile
README.md
app.json
devServer.js
netlify.toml
package-lock.json
package.json
postcss.config.js
server.js
webpack.config.js
webpack.config.prod.js

README.md

JamesG Trading Client

JamesG Trading is a platform developed by James Gallagher that facilitates and processes investments in him, as a publicly traded person.

If you are interested in the accompanying API, you can view it here. You can also view the Command Line Interface (CLI) for the JamesG Trading platform here.

Documentation

Getting Started

There are two options for installation:

  1. Clone repo

    git clone https://github.com/jamesgallagher432/jamesg-trading-client.git

  2. Install dependencies

    npm run setup

  3. Create environment file In order for the server and client to know how to call the API used in this project, you need to complete this file. We've included a .env.example file that you can rename to get started with the default values.

    cp .env.example .env

  4. Export environmental variables

    Run the command source .env to ensure that environmental variables are stored on your machine.

  5. Run development server

    npm run start

    Your app will be served at: http://localhost:1337

Deployment

Deploy

You can deploy this application on Heroku by using the above link, or run it on your local machine using the instructions above.

The deploy script is now totally automated and will hook into the server-rendering automatically. Running npm run serve:bundle will set your environment to production and serve these files via Express. Also, a Procfile is included, which will run the Express server on Heroku when you push your code.

File Structure

Some files left out for brevity. Below you can find the basic file structure used for this application.

.
├── README.md
├── LICENSE
├── index.html
├── package.json
├── webpack.config.js
├── app/
|   ├── fonts
|   ├── images
|   ├── src
|   |   ├── components
|   |   |   ├── FeatureFirstComponent
|   |   |   |   ├── index.js
|   |   |   |   ├── index.module.scss
|   |   |   |   └── tests
|   |   |   |   |   └── index.test.js
|   |   |   ├── styles.js
|   |   |   ├── index.modules.scss
|   |   |   └── index.js
|   |   ├── containers
|   |   |   ├── FeatureFirstContainer
|   |   |   |   ├── index.js
|   |   |   |   ├── index.module.scss
|   |   |   |   ├── styles.js
|   |   |   └── index.js
|   |   ├── pages
|   |   ├── store
|   |   ├── utils
|   |   └── index.js
|   └── styles
├── .eslintignore
├── .eslintrc
├── .gitattributes
└── .gitignore

Scripts

  • npm run setup

    • Installs the application's dependencies
  • npm run build

    • Bundles the application
  • npm run dev

    • Starts webpack development server
  • npm run lint

    • Runs the linter
  • npm run deploy

    • Creates the production ready files within the /server/public folder
  • npm run clean

    • Removes the bundled code and the production ready files
  • npm run serve:bundle

    • Serve production assets from the /server/public folder.

Generators

The boilerplate contains generators for easy project scaffolding. At the moment, the generator has the following scaffold generating commands built in:

  • Container npm run generate:container
    • Name: the name of the container, i.e. Awesome, which converts to: AwesomeContainer
    • Connected / Not connected ES6 Class containers (higher order)
    • SCSS Modules
    • Styled Components
    • Reducers, actions and constants
    • GraphQL: The generator can add collocated queries and mutations using GraphQL / ApolloClient. Accept the option to use this feature.
    • Tests for all of the above
    • README.md file that documents the container
  • Component npm run generate:component
    • Name: the name of the component, i.e. Button
    • Stateless functional components (recommended)
    • ES6 class components
    • SCSS modules
    • Styled Components
    • Tests for all of the above
    • README.md file that documents the component
  • Page npm run generate:page
    • Name: The name of the route, i.e. Home, which gets converted to HomePage
    • Route: the route that corresponds to the page
    • Container Import: Most of the time, a Route exists only to import a container by the same name. This is enabled by default, so make sure to run the container generator if you want to use this feature.

To run the generators with a list of options, run

npm run generate

Follow the on screen prompts to select the options you wish to use.

For convenience, you can bypass the initial selection and scaffold out containers, components and pages by running

npm run generate:<type_of_component>

where <type_of_component> is one of: component, container or page.

The generators use the same feature-first file organization as the rest of the project, encapsulating components within their own folder.

Technologies / Libraries

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Thank you to the Scalable React Boilerplate community for developing such a useful and swift starting point for building an application with React, Grommet, and GraphQL. This README includes content from the Scalable React Boilerplate to make it easy for you to understand how to get started with this project.

Thanks to Mike Merrill, the world's first publicly traded person, for providing me with advice on how to execute this project, and being a true inspiration to me.

You can’t perform that action at this time.