{"id":25049189,"url":"https://github.com/bhargav-joshi/quote-generator-nodejs-nextjs","last_synced_at":"2026-05-09T15:15:34.156Z","repository":{"id":275428404,"uuid":"926049564","full_name":"bhargav-joshi/Quote-generator-nodejs-nextjs","owner":"bhargav-joshi","description":"A simple Random Quote Generator app built with Node.js for the backend and Next.js for the frontend. The app allows users to view random quotes and add their own quotes to the database.","archived":false,"fork":false,"pushed_at":"2025-02-02T13:25:10.000Z","size":117,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T16:15:16.303Z","etag":null,"topics":["backend","frontend","nextjs","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/bhargav-joshi.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":"2025-02-02T12:34:28.000Z","updated_at":"2025-02-02T13:25:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"e9fd45c5-e966-4efb-8ba9-3b2ac149da8f","html_url":"https://github.com/bhargav-joshi/Quote-generator-nodejs-nextjs","commit_stats":null,"previous_names":["bhargav-joshi/quote-generator-nodejs-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhargav-joshi%2FQuote-generator-nodejs-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhargav-joshi%2FQuote-generator-nodejs-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhargav-joshi%2FQuote-generator-nodejs-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhargav-joshi%2FQuote-generator-nodejs-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhargav-joshi","download_url":"https://codeload.github.com/bhargav-joshi/Quote-generator-nodejs-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413377,"owners_count":20773053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["backend","frontend","nextjs","nodejs"],"created_at":"2025-02-06T08:16:49.848Z","updated_at":"2026-05-09T15:15:34.104Z","avatar_url":"https://github.com/bhargav-joshi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯 **Random Quote Generator - Node.js + Next.js**\n\nA simple **Random Quote Generator** app built with **Node.js** for the backend and **Next.js** for the frontend. The app allows users to view random quotes and add their own quotes to the database.\n\n###  Demo Screenshots of Project - \n\n![Screenshot 2025-02-02 181619](https://github.com/user-attachments/assets/5123ce04-8bd8-470b-aceb-72e7787de7a3)\n![Screenshot 2025-02-02 182013](https://github.com/user-attachments/assets/c2b9903b-3903-4e9d-9b22-93c4ff2f2ece)\n![Screenshot 2025-02-02 181915](https://github.com/user-attachments/assets/829ed9c4-48e7-43d7-a113-36979b2297f3)\n![Screenshot 2025-02-02 181758](https://github.com/user-attachments/assets/a73b4143-6792-4013-b6b6-fa61d4e95e37)\n![Screenshot 2025-02-02 181742](https://github.com/user-attachments/assets/aca81d16-31c9-4d75-843f-6b0017f6d181)\n![Screenshot 2025-02-02 181715](https://github.com/user-attachments/assets/881a24e9-f1a0-4a8f-9a30-32be1ba55e95)\n\n\n---\n\n## 🚀 **Features**\n- **Backend (Node.js + Express):**\n  - ✅ Fetches a random quote.\n  - ✅ Allows users to add new quotes.\n- **Frontend (Next.js):**\n  - ✅ Displays quotes fetched from the backend.\n  - ✅ Allows users to interact with the system and view new random quotes.\n\n---\n\n## 📦 **Technologies Used**\n- **Backend:**\n  - Node.js\n  - Express.js\n  - CORS (Cross-Origin Resource Sharing)\n  - Body-parser\n- **Frontend:**\n  - Next.js\n  - Axios (for making HTTP requests)\n- **Database (Optional):**\n  - MongoDB / SQLite (can be used to store quotes persistently)\n\n---\n\n## ⚡ **Getting Started**\n\nFollow the steps below to get the application up and running on your local machine.\n\n## ⚡ Step by Step Guide\n\nStep 1: Setup Node.js \u0026 Express Backend\nWe'll create an API that:\n\n- ✅ Returns a random quote.\n- ✅ Allows users to add new quotes.\n\n#### 1️⃣ Initialize a Node.js Project\n\nRun the following commands:\n\n```\nmkdir quote-generator\ncd quote-generator\nnpm init -y\n```\n\n#### 2️⃣ Install Required Dependencies\n\n```\nnpm install express cors body-parser\n```\n####  3️⃣ Create server.js (Backend)\n\n✅ Run the Backend:\n```\nnode server.js\n```\n\n---\n\n\n## ⚡Step 2: Setup Next.js Frontend\nLet's build a simple Next.js app to fetch and display quotes.\n\n#### 1️⃣ Create a Next.js App\nRun:\n```\nnpx create-next-app@latest quote-app\ncd quote-app\nnpm install axios\n```\n#### 2️⃣ Update pages/index.js\nEdit the file pages/index.js\n\n#### 3️⃣ Run the Next.js App\n```\nnpm run dev\n```\n\n## ⚡ Node Version Management\nTo ensure compatibility with the latest Next.js, use Node.js version 20.x or higher:\n```\nnvm install 20\nnode -v\n```\n\n## ⚡ Step 3: Verify the Application\n- Backend should be running on `http://localhost:5000`\n- Frontend should be running on `http://localhost:3000`\n\nVisit http://localhost:3000 and you should see a random quote displayed with a button to fetch a new one.\n\n#### 🎉 Enjoy Your Random Quote Generator!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhargav-joshi%2Fquote-generator-nodejs-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhargav-joshi%2Fquote-generator-nodejs-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhargav-joshi%2Fquote-generator-nodejs-nextjs/lists"}