I am a sofrware developer, and I’ve been developing web applications with multiple frameworks. Recently, I learn Redux which is an open-source Javascript library for managing data state. It is widely used with React to develop Front-end web applications. I’ve decided to make this toy example from scratch to teach myself and to share cutting-edge technology with people who are eager to learn Node.js, React and Redux. Actually, I learn those web technologies from online resources while working on a project. To be honest, my code is not enough to cover all topics. It may help beginners to understand data mannagement or data flow which is super important in web development. I hope everyone enjoys my tutorial, and please focus more on data flow.
- Understanding of web development life cycle
- Data model schema design for REST API
- Web authetication and authorization methods
- Communicating data between backend and frontend
- Implimenting basic four CRUD operations
- Differences between React only and React-Redux in terms of data flow
This tutorial consists of three parts:
- Part One: REST API with Node.js and MongoDB
- Part Two: Frontend with React only
- Part Three: Frontend with React and Redux
Target audiences:
- Beginners of web development
- People who want to learn Node.js, React, Redux and MongoDB
I've decided to start with a well-documented online resource, and this Express Tutorial: The Local Library website is good for understanding Express on Node.js and MongoDB with Mongoose. Please read through the Express Tutorial before start coding.
- Form validation
- Login/Logout and Signup with authentication tools such as JSON Web Token (JWT) and password hashing function (bcrypt)
- Display all books available to borrow
- Display all books borrowed by users
- Users can return the books
- Edit user's profile and password
I highly recommend reading online resources below. Also, I start off this example with Express application generator.
- Express Tutorial: The Local Library website
- Using HTTP Methods for RESTful Services
- Mongoose Schemas
- mLab - free sandbox
- Setting up the MongoDB database
- File: populatedb.js
- Tool: Postman
- Database: localhost MongoDB or cloud hosting MongoDB
- Routing: POST, GET, PUT, DELETE
- Mongoose: Schemas, Model, Populate
- JSON Web Token (JWT)
- Password hash function (bcrypt)
- bcrypt
- body-parser
- jsonwebtoken
- mongoose
- async
- nodemon
- Download or clone
$ git clone https://github.com/exponentian/web-development-beginner-guide-rest-api.git
- Install npm packages
$ npm install
-
Add your MONGOLAB URI in ./config.js
-
Start
$ npm start
Happy coding!