React Redux Express Boilerplate

Quick way to get up and started for prototyping with React, Redux and Express.

Bundled Dependencies

React
React Router
Redux with redux-thunk
Babel for ES6 awesomeness
Webpack
Express with Webpack HMRE
Nodemon for server live-reload
ESLint

Structure

The core app is structured to separate Redux containers and presentational components. Read more about it here. CSS modules is used by default to better scope and separate styles for each component, with a global CSS file for global styles.

app - Core app
- actions - Redux actions
- api - External services integrated
- components - Presentational components
- containers - Data/State containers
- reducers - Redux reducers
- store - Redux store
- app.global.css - Global CSS file
- index.tpl.html - Template HTML for rendering React Components. This will be injected with <style> tags by Webpack
- index.js - Entry point to app
- routes.js - Sample React Router implementation
server - Server code
- server.js - Simple Express server setup for Webpack HMRE. By default offloads routing to React Router but can still have REST endpoints setup.
static - Static assets

Usage

Installation

git clone git@github.com:zweicoder/react-redux-express-boilerplate.git
cd <project-directory> && npm install

Running

Start a hot dev server

npm run dev

Pushing without history

When you're ready to push, first set a new remote

git remote set-url <new-origin>

Checkout branch with no history, then commit and push

git checkout --orphan <new-branch>
git commit -a -m 'Initial Commit'
git push <new-branch>:master

or if no one is working on the repo

git push -f origin orphan:master

Now you can track remote master with your local master. Alternatively delete your local master branch after creating orphan branch, rename it to master and push.

Build

Consider linting and testing before build is allowed to happen, my personal opinion is it slows down prototyping so I only do it when the project gets bigger.

npm run build // This only builds for production

TODO

Setup tests
Server build

API

GET /api/items Get all items
GET /api/items/:id Get an item by id
GET /api/items/category/:category Get an item by its category
POST /api/items Send wardrobe data to server

TASKS

~~Create a new route / page~~
Use the MyCard component to create a carousel/gallery/slider (styling not mandatory) Documentation about MUI Card
Populate each slide with a title and list of items fetched from the server (using route /api/items)
Do the same step but use the /api/items/:id or /api/items/category/:category route so you would get items one at a time from the server
When an item in the list is clicked, it is added to a wardrobe object and we move to the next slide.
On the last slide, send the wardrobe data object to the server
Display the response message at the end (after sending the wardrobe data)

Jakku7 / react-redux-express-boilerplate