https://glacial-wave-21085.herokuapp.com/customer/1 To view a specific user id(on the right of the screen) https://glacial-wave-21085.herokuapp.com/api/customers To view the api JSON of all customers
https://glacial-wave-21085.herokuapp.com/api/customers/1 To view the api of a specific customer Tech Stack 💻 | Description 📋 --- | --- Node JS | To create the node web server and API, server-side code for the application using JS Express JS | Node.js framework to create powerful and useful features React | A highly popular JavaScript library for UI development(single page front-end app) MongoDB | A relational database to store in/out JSON through RESTful API
Dependencies | Description 📋 --- | --- Express | The node web server will render initial static HTML from our HTML from our front-end React components. Mongo | The node API server talks to the MongoDB database React | Frontend for UI development, to describe the user interface ReactDOM | The library to render the user interface on both the frontend and the backend
Dev Dependencies | Description 📋 --- | --- Webpack | This is the tool I used to translate modular code into something that the browser understands(modular code everywhere) Babel (Webpack loader) | This is to transform the JSX extension code into what React understands. Nodemon | When I change things in the node project, nodemon will monitor our file and auto-restart the server
The architure is split between a back-end and a web front-end. This project is a Node web server and Node API server. I used React on the frontend to consume data through the user interface(single page app). Furthermore, I used MongoDB database to read and write data by providing an in/out RESTful API in JSON. Seperation of react components in a Model-View-Controller style architecture
I have used pure react, so no Redux or even React Router(I used the page State instead). I have adopted the server-render first strategy and made sure my react frontend application is isomorphic so that it renders initial HTML for all supported routes. This gives me an advantage with SEO, which is very important.
** Note how I transform the source files into a bundled file for the browser 'public/bundle.js'. I configured webpack to work with the project structure in the webpack.config.js file on root level
** Note the .babelrc file on the root level is to configure babel to work with our selected presets.
** Note the index name is used to reference the starting point in every directory.
** Note that in the start script I use nodemon execution wrapper and babel-node instead of node because I want the code to work with babel and nodemon. Then we run the babel-loader for every file that end with a .js.
The public directory hosts my static assets like HTML, Javascript, and CSS files that will be loading on the client. Express serves these public files directly with its static middleware
To build an online SolarCity sales web application that accepts a customer's name, age, address, and why they are interested in Solar.
1. The architecture should be split between a back-end and a web front end.
2. Provide an in/out RESTful API in JSON
3. Use a backend database MongoDB to store customer information JSON data
4. **Full-stack**: includes both fron-end and back-end
5. A REACT single page front-end app that consumes data from the API
6. Utilize a simple build script function using npm start
I built a dozen web apps using pure node js(including very strong experience with functional progamming and call-backs) and express js framework (1 year experience)
I have in depth experience building MERN web apps and using REACT as my front end UI framework (6 months experience)
I am very comfortable using MySQL DBs or NoSQL DBs such as MongoDB and google's Firebase realtime database
If I had more time on this project I would improve the UI/UX of the website and create a backend internal tool for SolarCity sales reps to manage customers information from online individuals that indicate interest in Solar Panels.
Additionally, I would consume the API I built to build a mobile app using REACT Native