Fullstack web development (MERN) for RNT Computer Application, which is an Aplication directory website built on top of NodeJS.
Demo • API Usage • Deployment • Installation • Build With • NPM Packages • Demonstration • Future Updates • Known Bugs • Acknowledgement
Live demo (Feel free to visit) 👉 : https://rnt-computer.herokuapp.com/
Check:
RNT Computer App API Documentation Postman
for more info.
The website is deployed with git into heroku. Below are the steps taken:
$ git init
$ heroku login
$ heroku create <heroku_app_name> --buildpack https://github.com/mars/create-react-app-buildpack.git
$ heroku git:remote -a <heroku_app_name>
$ git add -A
$ git commit -m "Commit message"
$ git push heroku main
$ heroku open
You can fork the app or you can git-clone the app into your local machine. Once done that, please install all the dependencies by running
$ npx -p npm@6 npm i --legacy-peer-deps
$ npm i
$ npm start $ npm start $ npm run dev$ node seeder -import$ node seeder -destroy- Node.js - JS runtime environment
- React - A JavaScript library for building user interfaces
- Firebase - Authentication — user login and identity
- Firebase-admin - lets you interact with Firebase from privileged environments to perform actions
- Bootstrap - front-end open source toolkit for responsive site
- Sash - Admin template you can customize your dashboard effortlessly within no time.
- VSCode - Free source-code editor made by Microsoft
- Express - The web framework used
- Mongoose - Object Data Modelling (ODM) library
- MongoDB Atlas - Cloud database service
- Postman - API testing
- Git - Open source distributed version control system
- Cloudinary - Effortlessly optimize, transform, upload and manage your cloud's assets.
- Stripe - Online Payment Processing API payment gateway
- Heroku - Cloud platform
- Digital Ocean - Cloud platform
- ant-design
- swiper
- slick
- sweetalert2
- redux
- axios
- eslint
- eslint-config-airbnb
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-node
- eslint-plugin-prettier
- eslint-plugin-react
- prettier
- webpack
- webpack
- firebase-admin
- dotenv
- morgan
- multer
- body-parser
- Uniqueid
- ndb
- prettier
- nodemon
- slugify
- bcryptjs
- jsonwebtoken
- express-mongo-sanitize
- xss-clean
- helmet
- hpp
- express-rate-limit
- express-jwt
- cors
- validator
- compression
- Home
- Pagination
- Select specific fields in result
- Limit number of results
- Filter by fields
- Login
- Password
- Register
- Email registration
- registration complete
- Redirect link from firebase then you can completly login as a user/admin
- Forgot Password
- User can reset password using Forgot password menu
- Validation on update
- Header
- Home menu
- Login menu
- Register menu
- User and logout menu
-
We have complete a first major section in client side
-
However we want to use our node server with mongodb
-
That means the firebase client-side implementation pretty much ends here
-
we'll use firebase to only log the user and get token (authentication)
-
In our backend we will validate thet token using firebase admin so that our App is well secure
-
what i mean by secure is that if we dont check the validity of token in the backend then anyone can send anything as a token to get access to protected routes/resource
-
Once we implement fire base in backend, when user register or login to our app, we will create or update user in mongodb
-
then we will comeback to our login/register page and make some adjustments, so then when user login, the response is from our backend.
- Setup Server and Install Dependencies
$ npm i express body-parser mongoose cors morgan express-jwt firebase-admin jsonwebtoken nodemon dotenv-
Connect to NoSQL Database
- Local mongodb server
- Mongodb Atlas
-
Hit Routes Endpoint Testing
-
Setup Controllers
- Auth
- User
-
Create Model
- User
-
Middleware
- Auth
-
API User Response
- When user login, save user data to database.
-
Current User From API
- When user register, save user data to database.
- Refactor Create or update user function in react
- Service folder in client side for calling's API endpoint from server
-
Role Base on Redirect
- If user role = subscriber then redirect to user history page
- If user role = admin then redirect to admin dashboard page
-
Redirect Count Down
- When user need to go to user history or Checkout (etc) without login then rediret to login page
- show loading animation countdown when redirect in 5 second
-
Sitebar Nav User History
- creating User navbar component : User history, Password change, wishlist, etc.
-
Change Password Feature
- Current user login can update their own password
- authentication from firebase service
- change password form
- validate all element, set loading, etc
-
Admin Role authentication and athorization
- Protecting routes for admin role (Backend)
- Implementing middleware for admin role (backend)
- When Admin login then redirect to admin dashboard (Frontend)
- Create admin page (Frontend)
-
Admin Authorization
- Create Product
- Must have Category
- Must have Sub Category
- CRUD in Dashboard panel
-
Category
- Category model (Backend)
- Category controller and routes CRUD
- Category CRUD Endpoint in frontend service
-
Dynamic Dashboard Link
- when user with role subscriber login then show option to their own history/settings/dashboard
- when user with role admin login then show option to their own dashboard / Admin dashboard
-
Admin Sidebar Navigation
- List of admin sidebar navigation menu: Dashboard, Product, All Product, Category, Sub-Category, Coupon, and Password.
-
Category Create and show of all list the category
- Category form to create category
-
Category Render and delete
- Delete menu icon in category create admin dashboard
- Update menu icon in category create admin dashboard
- Category Delete Functionality
-
Category update
- category update page
- update category and redirect to admin/category
- refactor code for category Create and update form
-
Search Filter Category (admin dasboard)
- admin can search category by name of the product category
-
Code Refactor search filter
- Move search category code to local search
-
Subcategory CRUD
- create Subcategory model and populate to category
- create subcategory Routes and controllers
-
Subcategory Service (Frontend)
- Subcategory page and services
-
Subcategory Create
- Calling API endpoint for subcategory service frontend enhanced
- showing subcategory and remove
-
Update Subcategory in admin dashboard
-
Product (backend)
- Create product model/schema mongoose
- Product Routes and Controller
- Product Controller - Get all product from database
- Cloud Upload endpoints
- Implementation Cloudinary SDK
- Product image upload and delete route, controller and utils
- List all product endpoints
- Product Delete
- Product Update Endpoint
- New Arrival Product with sort, order and limit
- Get total product count (pagination)
- Star Ratings / average rating banckend
- Related Product endpoint
- Reformat Subcategory
- Search and Filtering
- Search redux setup
- Filtering Product by Price range
- Filtering product by category
- Filter by Star Ratings
- Filtering by Subcategory
- Filtering Product by Shipping, Color and Brand
- Cart Model
- User Cart Controller and routes
- Get user cart from database
- Empty/remove user cart in checkout
- Save User address in checkout
- Coupon Shcema model
- Coupon Routes and Controller
- Apply discount Coupon in user Cart Enpoint
- Create Payment Intent stripe, routes, and controller
- Total After Discount backend
- Order Schema Model
- Order Controller and routes
- decrement product quantity and increment product sold when user pay a products
- Get All User Orders (controllers and routes)
- Admin Controller and routes (user orders status)
- User product wishlist controller and routes
- user Cash On Delivery Order (backend)
-
Product (frontend)
- Create product page, product services and routes (admin autorization)
- create product form
- Frist test to create Product from client to send to server
- Alert and reload page after product was created
- Error handler when create duplicate value name or title in product
- Refactor Product code - component and page
- Create product with category
- get subcategory base on parent category
- subcategory props - calling subcategory when choosing category in create product on admin dashboard
- Multiple select for subcategory form
- create product with subcategory array
- file / image resize in react
- multiple image upload (cloud storage)
- product image preview when upload in admin dasboard
- Product create with multiple images
- Fetch all products in admin dashboard
- Admin products card
- All product page admin dashboard
- Default image, edit-delete icon, and sort the description
- Delete Product
- Product slug from router (update product)
- Product Update Component
- Prepopulate shipping color and brand (Update component)
- Prepopulate Caategory in product update
- Prepopulate Subcategory in product update
- Category and Subcategory Sync on update product feature
- Image Upload in Update Product feature
- Product Update (Final)
- Fetch product in home page
- Product Card in Home Page
- Fetch product in card - Home Page
- Product loader card skeleton in home page
- Calling reuseable Product endpoint in home page
- New Arrival Card component
- Best Seller Card Component
- Product Detail page
- Product detail carausel, title, price and description
- Handle no product images in product details
- Product detail specification
- Tab menu for description and specification in Product detail
- display Star Rating in product detail (log)
- star ratings modal
- Login to leave ratings
- login to leave ratings and redirect page to home
- API Request for product star ratings
- Show user existing ratings in product they vote
- Show Average rating total in product detail
- Show Average rating total product in home page
- Show related product in product detail
- Category list in home page
- fetch Single category test
- Click category then show product only with the same category (ex. apple => product : apple)
- Category page with product
- Subcategory page with product showing
- Shop Page menu
- search by text title
- Filter product by price range (slider)
- Filtering product by category
- reset filtering when choose one filter/search (ex, search, category, price, etc)
- Filter product by Star rating
- Filter product by subcategory
- Filter product by Brands
- Filter product by Color
- Filter product by Shipping
- Add product to local storage
- Cart in redux state
- dispatch add to cart to redux
- Cart Page Setup {JSON.Stringify}
- Cart Total
- if user not login give option to login page then after login redirect to cart for checkout.
- Cart item in table
- Product cart Quantity increase and decrease amount stock
- Remove product from cart (localStorage)
- Product cart drawer feature
- Checkout page setup
- Save cart request
- Get user cart in checkout page
- user Checkout order
- Empty user cart in checkout pages
- User Address in checkout
- Save user address in checkout pages
- Coupon Page in admin dashboard
- Create Coupon in admin dashboard
- Coupon List and delete in admin dashboard
- Apply Coupon in Checkout page (console.log)
- Coupon Applied and Set total discount price (Checkout page)
- Coupon Invalid and coupon success applied messages in checkout pages
- Coupon in redux
- React Stripe Setup in frontend
- Stripe Checkout component
- Successful payment
- show discount and coupon applied in frontend
- empty user cart when create order
- disable button / Out of stock when quantity unavailabel or equal to zero
- User orders in purchase history
- Purchase order in card (user history)
- Show user orders product list table in user history
- Show user Payment info in User History page
- Invoice PDF view and Download invoice PDF
- Invoice Component
- Download Invoice as PDF file
- Load orders in admin dashboard
- User Order Status update in admin dashboard
- User Product order table list in admin dashboard
- user Wishlist services in frontend
- Wishlist In Frontend (user)
- (COD) Cash On Delivery for payment option
- create cash on delivery order or redirect to payment page
- Cash on delivery order success, coupon apply and status order
- Code splitting wit lazy and suspense
- Admin password change in admin dashboard
- All heading in admin dashboard not showing because sticky header.
- Register complete not working
- Pagination/loadmore for product list in admin dashboard
- Update all product with the real image, description, title, etc.
- Add newline when showing description in product detail.
- Fix Price number in product detail.
- show total/Length customer review
- Make User interface more beautiful with react material UI
- Implementing clean code architecture
- Refactoring code for client side (Frontend)
- Refactoring code for server (Backend)
- Improve authentication and authorization
- And More ! There's always room for improvement!
Feel free to email me at rianto.rnt@gmail.com if you run into any issues or have questions, ideas or concerns. Please enjoy and feel free to share your opinion, constructive criticism, or comments about my work. Thank you! 🙂
/ (Home Page)
/cart
/checkout
/payment
/category/:slug
/subcategory/:slug
/login
/register
/complete-registration
/forgot-password
/product/:slug
/my-account/history
/my-account/wishlish
/admin/dashboard
/admin/category
/admin/category/:slug
/admin/subcategory
/admin/coupon
/admin/password
/admin/product
/admin/products
/admin/product/:slug
/admin/orders
/create-or-update-user
/current-user
/current-admin
/category
/subcategory
/coupon
/product
/create-payment-intent
/user
- This project is part of the online course I've taken at Udemy. Thanks to Ryan Dhungel for creating this awesome course! Link to the course: React Redux Ecommerce - Master MERN Stack Web Development