{"id":20771479,"url":"https://github.com/vertikajain/realtime-salad-app","last_synced_at":"2026-04-08T23:32:49.821Z","repository":{"id":164491864,"uuid":"288872739","full_name":"VertikaJain/realtime-salad-app","owner":"VertikaJain","description":"100 days of Code Challenge! Real-time Salad order tracker application using Full Stack - NodeJS, Express, MongoDB.","archived":false,"fork":false,"pushed_at":"2020-10-21T17:20:18.000Z","size":7839,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-26T11:44:36.077Z","etag":null,"topics":["100daysofcode","ejs","express","mongodb","nodejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VertikaJain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-20T01:10:21.000Z","updated_at":"2022-08-17T18:24:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e59ee80-6046-4a7e-b811-8d18baaf2e85","html_url":"https://github.com/VertikaJain/realtime-salad-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/VertikaJain/realtime-salad-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Frealtime-salad-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Frealtime-salad-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Frealtime-salad-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Frealtime-salad-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VertikaJain","download_url":"https://codeload.github.com/VertikaJain/realtime-salad-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Frealtime-salad-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31579053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["100daysofcode","ejs","express","mongodb","nodejs"],"created_at":"2024-11-17T12:15:10.982Z","updated_at":"2026-04-08T23:32:49.804Z","avatar_url":"https://github.com/VertikaJain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SALAD ORDER TRACKER APPLICATION\n  - A real time application to track orders online. Users can order Salads, view cart, and check the delivery status.\n  - Part of 100 days of code challenge.\n\n## Technology Stack\n  1. JavaScript - NodeJS Framework\n  2. ExpressJS\n  3. EJS Template\n  4. YARN (package manager)\n  5. MongoDB\n  6. Laravel Mix\n  7. Tailwind CSS\n  8. Socket.io\n  9. ES6\n  10. SCSS\n  \n## Project Structure - MVC pattern\n  1. `Model` is the Database part of the application. It represents the structure of data, the format and the constraints with which it is stored.\n  2. `View` is the User Interface part. It utilizes the Model(using controllers) and presents data as static/dynamic pages to the user for further tasks.\n  3. `Controller` is the request-response handler. The user interacts with the View, which in turn generates a request, that will be handled by a controller. The controller renders the appropriate view with the model data as a response.\n\n## Installations\n  1. Download \u0026 Install [NodeJS](https://nodejs.org/en/download/)\n  2. Download \u0026 Install [YARN](https://classic.yarnpkg.com/en/docs/install#windows-stable)\n  3. Download \u0026 Install [GIT](https://git-scm.com/downloads)\n  4. Steps for Installing [Laravel](https://laravel-mix.com/docs/5.0/installation#stand-alone-project)\n  5. [Using Tailwind CSS via CDN](https://tailwindcss.com/docs/installation#using-tailwind-via-cdn) (No need to install complete framework)\n  6. [MongoDB for Windows](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/)\n  7. [MongoDB Compass](https://www.mongodb.com/try/download/compass)\n  \n## YARN Commands\n  1. `yarn -v` (check version of YARN)\n  2. `cd realtime-salad-app` (to work in the project folder)\n  3. `yarn init` (Initializes package.json file in root of project)\n  4. `yarn add express ejs express-ejs-layouts` (The above command performs 4 tasks-) \n      - Writes dependencies to package.json,\n      - Downloads express, ejs and express-ejs-layouts dependencies from there respective repositories on the Cloud,\n      - Adds node_modules folder, which contains all the dependencies like a Tree structure, and\n      - Creates yarn.lock file, which locks down the versions of the dependencies specified in the package.json file.\n  5. `yarn add nodemon -D` (downloads nodemon that automatically restarts the server on any changes in the project \u0026 adds nodemon to devDependencies in package.json)\n  6. `yarn dev` (runs the server)\n  7. `yarn add laravel-mix -D` (downloads Laravel Mix, updates node_modules \u0026 adds laravel to devDependencies in package.json)\n  8. `yarn add cross-env --save-dev` (to handle different environments)\n  9. `yarn watch` (performs the following tasks -)\n      - installs sass, sass-loader \u0026 resolve-url-loader dependencies when executed first time, and saves to package.json.\n      - compiles SCSS \u0026 JS files using laravel-mix, and stores the compiled code to public folder i.e. CSS \u0026 JS.\n  10. `yarn add mongoose` (helps in interaction of JS code with MongoDB)\n  11. `yarn add express-session` (helps in storing sessions in key-value form)\n  12. `yarn add dotenv` (a zero-dependency module that loads environment variables from a .env file into process.env)\n  13. `yarn add express-flash` (used to flash messages for the application)\n  14. `yarn add axios` (promise based HTTP client for the browser and node.js)\n  15. `yarn add noty` (notification library that makes it easy to create alert, success, error, warning, information and confirmation messages)\n  16. `yarn add bcrypt` (A library which helps in hashing passwords)\n  17. `yarn add passport passport-local` (Authentication)\n  18. `yarn add moment` (A JavaScript date library for parsing, validating, manipulating, and formatting dates)\n  19. `yarn add socket.io` (real-time bidirectional event-based communication)\n\n## NPM Commands\n  *NPM package manager is automatically downloaded with NodeJS, and it can be used as an **alternative to YARN**. Since NPM has a drawback that it works quite slow when compared with YARN (as YARN installs dependencies simultaneously), I will be using YARN in this project. However, I am providing NPM commands as well for reference.*\n  1. npm -v\n  2. cd realtime-salad-app\n  3. npm init\n  4. npm install express ejs express-ejs-layouts\n  5. npm install nodemon --save-dev\n  6. npm run dev\n  7. npm install laravel-mix --save-dev\n  8. npm install cross-env --save-dev\n  9. npm run watch\n  10. npm install mongoose\n  11. npm install express-session\n  12. npm install dotenv\n  13. npm install express-flash\n  14. npm install axios\n  15. npm install noty\n  16. npm install bcrypt\n  17. npm install passport passport-local\n  18. npm install moment\n  19. npm install socket.io\n\n## GIT Commands\n```\n  1. git --version (checks version)\n  2. git init (creates .git file )\n  3. git status (to check if files are committed or not)\n  4. git add . (adds all files, ready to commit)\n  5. git commit -m \"commit message here\"\n  6. git push origin master -f (pushing all changes to github; -f stands for forced push)\n  7. git status (recheck files)\n  8. [.gitignore commands](https://stackoverflow.com/questions/12501324/how-to-use-gitignore-command-in-git)\n  9. [.gitignore for NodeJS guide](https://github.com/github/gitignore/blob/master/Node.gitignore)\n```\n  \n## Why use Laravel Mix?\n  - A tool used to compile resources like modern JavaScript and SCSS code and store it to the public folder in JS and CSS format. \n  - Advantage over other tools - avoids manual configuration (internally uses WebPack).\n  - Works inside Laravel framework usually, but has an benefit that it can be used in Stand Alone projects like this one.\n  - [Laravel Guide](https://laravel.com/docs/7.x/mix)\n\n## webpack.mix.js\n  - A configuration file downloaded to node_modules while installing Laravel Mix.\n  - Copy this file from node_modules to the root of project directory using the command given below.\n  - **cp** node_modules/laravel-mix/setup/webpack.mix.js ./ (use **copy** in case of Windows OS)\n  - This file imports laravel-mix module, and uses the methods js() \u0026 sass() for compilation and then storing of the compiled files.\n  \n## Scripts in package.json\n  - Update [scripts](https://laravel-mix.com/docs/5.0/installation#npm-scripts) in package.json file to compile these files.\n  - The watch command automatically compiles the file everytime it is changed, eliminating the need to manually compile repeatedly.\n  - cross-env : Runs Scripts that set and use environment variables across platforms (useful in production). \n\n## layout.ejs\n  - An ejs file that serves the common content such as header, footer and nav bar to all the pages in the application.\n  - Code in other ejs files like home, login and register, is simply embedded using `\u003c%- body%\u003e` after the nav bar.\n\n## Session Configuration\n  - Done using express-session module, needed to store Cart data in this project.\n  - The server creates \u0026 stores a session ID (sid) when a new client Requests for the web page.\n  - Then it sends a message in Response header, which has sid, asking the client to create a cookie using that session id.\n  - For every next request header from client, the cookie will be send to server, so that the server can recognize the client as an existing one.\n  \n## Express Methods (Assets)\n  *Built-in middleware functions in Express.*\n  - [express.static()](https://expressjs.com/en/4x/api.html#express.static)\n  - [express.json()](https://expressjs.com/en/api.html#express.json)\n  - [express.urlencoded()](https://expressjs.com/en/4x/api.html#express.urlencoded)\n  \n## Database Connectivity - MongoDB, NodeJS \u0026 Mongoose\n  - Mongoose is an Object Data Modeling library, that provides object mapping between MongoDB and NodeJS.\n  - Connection is established using `mongoose.connect()` for single connection, or `mongoose.createConnection()` for multiple connections.\n  - A Schema helps in defining the fields stored in each document along with their validation requirements and default values.\n  - The timestamps parameter helps to add createdAt and updatedAt properties automatically to the particular document in the collection.\n  - Schemas are then \"compiled\" into Models using the mongoose.model() method.\n      - `const MyModel = mongoose.model('ModelName', mySchemaName);`\n      - The first argument is the singular name of the collection your model is for. Mongoose automatically looks for the plural version of your model name. \n  - [Mongoose exists() method](https://kb.objectrocket.com/mongo-db/the-mongoose-exists-function-1022)\n  - [Mongoose findById() method](https://kb.objectrocket.com/mongo-db/mongoose-findbyid-1415)\n  - [Mongoose findOne() method](https://kb.objectrocket.com/mongo-db/mongoose-find-one-1409)\n  - [Mongoose populate() method](https://mongoosejs.com/docs/populate.html)\n  - [Aggregation $ne](https://docs.mongodb.com/manual/reference/operator/aggregation/ne/)\n\n## Hashing Passwords using bcrypt library\n  *Using [bcrypt](https://www.npmjs.com/package/bcrypt) is a secured way to store passwords in a database regardless of whatever language the app’s backend is built in — PHP, Ruby, Python, Node.js.*\n  ```\n  const bcrpyt = require(\"bcrypt\")\n  const hashedPassword = await bcrpyt.hash(password, 10)\n  ```\n  \n## Passport - authentication middleware for Node.js\n  - **passport-local** is a passport strategy for authenticating with a username and password.\n  - [Usage/Configuration](https://github.com/jaredhanson/passport-local/#usage)\n  - [Middlewares](http://www.passportjs.org/docs/configure/)\n      - passport.initialize()\n      - passport.session()\n  - Passport will serialize and deserialize user instances to and from the session using:\n      - passport.serializeUser()\n      - passport.deserializeUser()\n\n## User-defined Middlewares for authentication\n*Middlewares are methods that can be executed before calling other methods/functionalities, and can also pause further execution based on given logic in the middleware at the time of request. Hence it alters the response.*\n  - 'guest' middleware ensures that user redirects to login/register page only when logged out.\n  - 'auth' middleware ensures that user redirects to customer/orders page only when logged in.\n  - 'admin' middleware ensures that only the admin has access to the admin/orders page once logged in.\n\n## Socket.io Integration\n  - Fetching the library in layout file using- `\u003cscript src=\"/socket.io/socket.io.js\"\u003e\u003c/script\u003e`\n  - Created a separate room for each Order \u0026 one for Admin using- `io.on(\"connection\",())`\n  - Used EventEmitter to emit events of Order \u0026 status updates. Binded the eventEmitter to the app using- `app.set(\"eventEmitter\", eventEmitter)`\n  - The main purpose is to update Admin Orders page \u0026 Customer Status Tracker page dynamically, without page refresh.\n\n## Resources\n  - [Realtime Pizza App by Coder's Gyan](https://www.youtube.com/watch?v=RqiU5nzj_nU\u0026list=PLXQpH_kZIxTVRmXQN9J0Az76te5mAreLV\u0026ab_channel=Coder%27sGyan)\n  - [Google Font Lato](https://fonts.google.com/specimen/Lato)\n  - [ES6](https://www.javascripttutorial.net/es6/)\n  - [Using Template Engines](https://expressjs.com/en/guide/using-template-engines.html)\n  - [Building forms with Tailwind CSS](https://tailwindcss.com/components/forms)\n  - [Factory Functions](https://www.youtube.com/watch?v=jpegXpQpb3o)\n  - [Using DB with Mongoose MDN](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose)\n  - [Working of Mongoose](https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/)\n  - [Why Axios](https://medium.com/@MinimalGhost/what-is-axios-js-and-why-should-i-care-7eb72b111dc0)\n  - [Using Middleware](https://expressjs.com/en/guide/using-middleware.html)\n  - [res.locals](https://expressjs.com/en/api.html#res.locals)\n  - [Object Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\n  - [bcrypt JS Working](https://medium.com/javascript-in-plain-english/how-bcryptjs-works-90ef4cb85bf4)\n  - [Constructor Functions](https://www.youtube.com/watch?v=23AOrSN-wmI\u0026ab_channel=ProgrammingwithMosh)\n  - [Passport-local](http://www.passportjs.org/packages/passport-local/)\n  - [Moment.js](https://momentjs.com/)\n  - [req.xhr](https://expressjs.com/en/4x/api.html#req.xhr)\n  - [Cache Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)\n  - [Pseudo Elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)\n  - [Line Awesome](https://icons8.com/line-awesome)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvertikajain%2Frealtime-salad-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvertikajain%2Frealtime-salad-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvertikajain%2Frealtime-salad-app/lists"}