Skip to content

Commit 63f9bf0

Browse files
VvorkCloudTechnologiesVvorkCloudTechnologies
committed
initial commit
1 parent 37feb7d commit 63f9bf0

33 files changed

+14637
-2
lines changed

Diff for: ‎.DS_Store

6 KB
Binary file not shown.

Diff for: ‎.babelrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
["@babel/preset-env", {
4+
"targets": {
5+
"node": "10"
6+
}
7+
}],
8+
"@babel/preset-react"
9+
]
10+
}

Diff for: ‎.env-sample

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
DEV_DB=mongodb://localhost:27017/development
2+
TEST_DB=mongodb://localhost:27017/test
3+
PROD_DB=mongodb://localhost:27017/production
4+
5+
API_DEV=http://localhost:<port number>/api/v1
6+
API_PROD=https://<buildplatform uri>/api/v1

Diff for: ‎README.md

+67-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,67 @@
1-
# React-redux-node-starter-minikit
2-
React-redux/express starter kit 2019 -webpack4
1+
# React Redux Node Simple Starter Kit
2+
3+
This is repository is created to help bootstrap every React-Redux application with a Node-Express backend using MongoDB as it primary database.
4+
5+
## Requirements
6+
7+
- node `10`
8+
- npm `^6.0.1`
9+
- mongodb `3.6.3`
10+
11+
## Installation
12+
13+
Download and install [MongoDB](https://www.mongodb.com/download-center#community)
14+
15+
Create a new MongoDB database. Retrieve your URI connection string. See examples [here](https://docs.mongodb.com/manual/reference/connection-string/#examples)
16+
Create your .env file and populate the relevant values based on the sample file .env-sample
17+
18+
After confirming that your environment meets the above requirements, you can create a new project based on `react-redux-node-starter-minikit` by doing the following:
19+
20+
```bash
21+
$ git clone https://github.com/ishanShahzad/React-redux-node-starter-minikit.git
22+
<my-project-name>
23+
$ cd <my-project-name>
24+
```
25+
26+
Then install dependencies
27+
28+
```bash
29+
$ npm install
30+
$ npm run prod #this will create a Dist folder in client
31+
$ npm run dev # webpack-dev-server will run front end only
32+
$ npm start # Compiles the server-side and client side before the application launches
33+
```
34+
35+
If everything works, you should get a message indicating so. In development Application will be served on port 3000
36+
Open the web browser to http://localhost:3000/
37+
38+
## Project Structure
39+
40+
The project structure presented in this starter kit is outlined below. This structure is only meant to serve as a guide.
41+
42+
```
43+
.
44+
├── client # React-redux related files
45+
│ ├── dist # Transpiled react source code
46+
│ ├── src # Collections of reducers/constants/actions
47+
│ │ ├── actions # Actions
48+
│ │ ├── components # Containers Components and Components connect to store and actions
49+
│ │ ├── constants # Constants
50+
│ │ ├── reducers # Reducers
51+
│ │ ├── store.js # Create and instrument redux store
52+
│ │ ├── index.js # Redux-specific pieces
53+
│ │ ├── index.html # Main HTML page container for app
54+
│ │ └── styles.scss # Application styles
55+
└── server # Application source code
56+
├── config # Configurations folder (Database etc.)
57+
├── controllers #
58+
├── models #
59+
├── routes #
60+
├── tests # Unit test
61+
└── index.js # Express application
62+
63+
```
64+
65+
## Contributing
66+
67+
I am more than happy to accept contributions to the project. Contributions can be in the form of feedback, bug reports or even better - pull requests :)

Diff for: ‎client/dist/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Starter Kit</title>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<link rel="stylesheet" href="style.fe85ce1cfd782d0d6b80.css?36407833d282f7976544">
10+
11+
<!-- Bootstrap CSS -->
12+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
13+
</head>
14+
<body>
15+
<div id="app"></div>
16+
17+
<script type="text/javascript" src="main.4c2fbf0522af8138d7af.js?36407833d282f7976544"></script>
18+
19+
<!-- Optional JavaScript -->
20+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
21+
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
23+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
24+
</body>
25+
</html>

Diff for: ‎client/dist/main.4c2fbf0522af8138d7af.js

+45
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎client/dist/style.fe85ce1cfd782d0d6b80.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#headerButtons{list-style-type:none;margin:0;padding:0}.navButton{float:right}footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f5f5f5}.container{width:auto;max-width:680px;padding:0 15px}
2+

Diff for: ‎client/src/actions/index.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { recordConstants } from '../constants';
2+
import api from '../utils/api';
3+
4+
export const fetchRecords = records => ({
5+
type: recordConstants.FETCH_RECORD,
6+
payload: records
7+
});
8+
9+
10+
export const getAllRecords = () => (dispatch) => {
11+
api.get('/record')
12+
.then((response) => {
13+
dispatch(fetchRecords(response.data.records));
14+
})
15+
.catch((error) => {
16+
console.error(`Error : ${error}`);
17+
});
18+
};

Diff for: ‎client/src/components/App.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { Component } from 'react';
2+
import {
3+
BrowserRouter as Router,
4+
Route,
5+
Switch
6+
} from 'react-router-dom';
7+
import Layout from './Layout';
8+
import Home from './pages/Home';
9+
import About from './pages/About';
10+
import NotFound from './pages/NotFound';
11+
12+
class App extends Component {
13+
render() {
14+
return (
15+
<Router>
16+
<Layout>
17+
<Switch>
18+
<Route exact path="/" component={Home} />
19+
<Route exact path="/about" component={About} />
20+
<Route path="/*" component={NotFound} />
21+
</Switch>
22+
</Layout>
23+
</Router>
24+
);
25+
}
26+
}
27+
28+
export default App;

Diff for: ‎client/src/components/Layout.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import Header from './common/Header';
5+
import Footer from './common/Footer';
6+
7+
class Layout extends Component {
8+
render() {
9+
return (
10+
<div>
11+
<Header />
12+
<main className="container">{this.props.children}</main>
13+
<Footer />
14+
</div>
15+
);
16+
}
17+
}
18+
19+
Layout.propTypes = {
20+
children: PropTypes.object.isRequired,
21+
};
22+
23+
export default Layout;

Diff for: ‎client/src/components/common/Footer.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component } from 'react';
2+
3+
class Footer extends Component {
4+
render() {
5+
return (
6+
<footer className="footer">
7+
<div className="container">
8+
<span className="text-muted">Footer items.</span>
9+
</div>
10+
</footer>
11+
);
12+
}
13+
}
14+
15+
export default Footer;

Diff for: ‎client/src/components/common/Header.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
class Header extends Component {
5+
render() {
6+
return (
7+
<header >
8+
<div className="container">
9+
<nav className="navbar navbar-expand-lg navbar-light bg-light">
10+
<a className="navbar-brand" href="#">AppName</a>
11+
<button className="navbar-toggler" type="button"
12+
data-toggle="collapse" data-target="#navbarNav"
13+
aria-controls="navbarNav" aria-expanded="false"
14+
aria-label="Toggle navigation">
15+
<span className="navbar-toggler-icon"/>
16+
</button>
17+
<div className="collapse navbar-collapse" id="navbarNav">
18+
<ul className="navbar-nav">
19+
<li className="nav-item">
20+
<Link className="nav-link" to="/">Home</Link>
21+
</li>
22+
<li className="nav-item">
23+
<Link className="nav-link" to="/About">About</Link>
24+
</li>
25+
</ul>
26+
</div>
27+
</nav>
28+
</div>
29+
</header>
30+
);
31+
}
32+
}
33+
34+
export default Header;

Diff for: ‎client/src/components/pages/About.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Component } from 'react';
2+
3+
class About extends Component {
4+
render() {
5+
return (
6+
<div>
7+
<h4>About page</h4>
8+
<p>This page is not connect to the store</p>
9+
</div>
10+
);
11+
}
12+
}
13+
14+
export default About;

Diff for: ‎client/src/components/pages/Home.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import { connect } from "react-redux";
4+
import { getAllRecords } from "../../actions";
5+
6+
class Home extends Component {
7+
// componentDidMount() {
8+
// // this.props.getAllRecords();
9+
// }
10+
11+
render() {
12+
const { records } = this.props.records;
13+
14+
return (
15+
<div>
16+
<h4>Home page</h4>
17+
<p>This page is connected to the store</p>
18+
<p>
19+
This page should display {records.length} records from the MongoDB
20+
database
21+
</p>
22+
</div>
23+
);
24+
}
25+
}
26+
27+
Home.propTypes = {
28+
getAllRecords: PropTypes.func.isRequired,
29+
records: PropTypes.object
30+
};
31+
32+
const mapStateToProps = state => ({
33+
records: state.records
34+
});
35+
36+
export default connect(
37+
mapStateToProps,
38+
{ getAllRecords }
39+
)(Home);

Diff for: ‎client/src/components/pages/NotFound.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
const NotFound = () => {
4+
return (
5+
<div className="not-found">
6+
Page Not found
7+
</div>
8+
);
9+
};
10+
11+
export default NotFound;

Diff for: ‎client/src/constants/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// eslint-disable-next-line import/prefer-default-export
2+
export const recordConstants = {
3+
FETCH_RECORD: 'FETCH_RECORD',
4+
};

Diff for: ‎client/src/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Starter Kit</title>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>">
10+
11+
<!-- Bootstrap CSS -->
12+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
13+
</head>
14+
<body>
15+
<div id="app"></div>
16+
17+
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
18+
19+
<!-- Optional JavaScript -->
20+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
21+
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
23+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
24+
</body>
25+
</html>

Diff for: ‎client/src/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Provider } from 'react-redux';
3+
import ReactDOM from 'react-dom';
4+
5+
import store from './store';
6+
import App from './components/App';
7+
8+
require('./styles.scss');
9+
10+
ReactDOM.render(
11+
<Provider store={store}>
12+
<App />
13+
</Provider>,
14+
document.getElementById('app')
15+
);

Diff for: ‎client/src/reducers/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { combineReducers } from 'redux';
2+
import recordReducer from './recordReducer';
3+
4+
const rootReducer = combineReducers({
5+
records: recordReducer,
6+
});
7+
8+
export default rootReducer;

Diff for: ‎client/src/reducers/recordReducer.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { recordConstants } from '../constants';
2+
3+
const initialState = {
4+
records: [],
5+
};
6+
7+
const recordReducer = (state = initialState, action) => {
8+
switch (action.type) {
9+
case recordConstants.FETCH_RECORD:
10+
return {
11+
...state,
12+
records: action.payload
13+
};
14+
default:
15+
return state;
16+
}
17+
};
18+
19+
export default recordReducer;

0 commit comments

Comments
 (0)