{"id":31186043,"url":"https://github.com/ryantusi/crud-full-stack-pern-app","last_synced_at":"2026-04-11T05:32:53.875Z","repository":{"id":313209554,"uuid":"1049648867","full_name":"ryantusi/CRUD-Full-Stack-PERN-App","owner":"ryantusi","description":"A Full Stack CRUD Application built using the PERN stack. It allows users to create, read, update, and delete members.This project was developed to learn full stack development end-to-end: designing API, connecting frontend with backend, handling database queries, and deploying to cloud platforms.","archived":false,"fork":false,"pushed_at":"2025-09-11T19:44:06.000Z","size":1713,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-11T21:36:56.298Z","etag":null,"topics":["crud","daisyui","express","full-stack","nodejs","pern","postgresql","react","rest-api","tailwindcss"],"latest_commit_sha":null,"homepage":"https://crud-app-rt.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryantusi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-03T09:40:17.000Z","updated_at":"2025-09-11T19:47:47.000Z","dependencies_parsed_at":"2025-09-04T16:08:30.689Z","dependency_job_id":null,"html_url":"https://github.com/ryantusi/CRUD-Full-Stack-PERN-App","commit_stats":null,"previous_names":["ryantusi/crud-full-stack-pern-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ryantusi/CRUD-Full-Stack-PERN-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryantusi%2FCRUD-Full-Stack-PERN-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryantusi%2FCRUD-Full-Stack-PERN-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryantusi%2FCRUD-Full-Stack-PERN-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryantusi%2FCRUD-Full-Stack-PERN-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryantusi","download_url":"https://codeload.github.com/ryantusi/CRUD-Full-Stack-PERN-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryantusi%2FCRUD-Full-Stack-PERN-App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275990470,"owners_count":25565653,"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","status":"online","status_checked_at":"2025-09-19T02:00:09.700Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["crud","daisyui","express","full-stack","nodejs","pern","postgresql","react","rest-api","tailwindcss"],"created_at":"2025-09-19T19:28:52.137Z","updated_at":"2025-09-19T19:28:53.879Z","avatar_url":"https://github.com/ryantusi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CRUD Full Stack PERN App  \n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/6279f997-36f6-4ed4-a8ff-1e2c92406443/deploy-status)](https://crud-app-rt.netlify.app/)  \n![License](https://img.shields.io/badge/license-MIT-blue.svg)  \n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)  \n\n## 🚀 Live Demo  \n👉 [CRUD App Live Deployment](https://crud-app-rt.netlify.app/)  \n\n![Video](assets/crudapp.gif)\n\n## 📌 About the Project  \nThis is a **Full Stack CRUD Application** built using the **PERN stack**:  \n- **PostgreSQL** – database  \n- **Express.js** – backend REST API  \n- **React (Vite)** – frontend  \n- **Node.js** – runtime  \n\nIt allows users to **create, read, update, and delete members** with details such as **Name, Job, and Status**.  \n\nThis project was developed to **learn full stack development end-to-end**: designing API, connecting frontend with backend, handling database queries, and deploying to cloud platforms.  \n\n## 🛠️ Tech Stack  \n\n**Frontend:**  \n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)  \n![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white)  \n![TailwindCSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=white)  \n\n**Backend:**  \n![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)  \n![Express](https://img.shields.io/badge/Express.js-000000?style=for-the-badge\u0026logo=express\u0026logoColor=white)  \n![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white)  \n\n**Deployment:**  \n![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge\u0026logo=netlify\u0026logoColor=white)  \n![Render](https://img.shields.io/badge/Render-46E3B7?style=for-the-badge\u0026logo=render\u0026logoColor=black)  \n\n## 📂 Project Structure  \n\n```\nCRUD-Full-Stack-PERN-App/\n│\n├── backend/                 # Backend code (Express + PostgreSQL)\n│   ├── controllers/         # Controller logic\n│   ├── models/              # Database queries\n│   ├── routes/              # API routes\n│   ├── utils/               # Helper functions\n│   ├── test/                # Test files\n│   ├── server.js            # Entry point for backend\n│   ├── package.json\n│   └── .env                 # Environment variables\n│\n├── frontend/                # Frontend code (React + Vite)\n│   ├── public/              # Static assets\n│   ├── src/                 # React components\n│   ├── index.html\n│   ├── package.json\n│   └── vite.config.js\n│\n├── LICENSE\n└── README.md\n```\n\n## 📸 Snapshot\n\n![Video](assets/crudapp.gif)\n\n - 🏠 Homepage\n\n - ➕ Add Member Modal\n\n - ✏️ Update Member Modal\n\n## ✨ Features\n\n  * ✅ Add new members with **Name, Job, Status**\n  * ✅ Update existing member details\n  * ✅ Delete members\n  * ✅ Responsive UI with TailwindCSS\n  * ✅ Connected with PostgreSQL database\n  * ✅ Full stack deployment with Netlify (frontend) + Render (backend)\n\n\n## ⚙️ Installation \u0026 Setup\n\n### 🔹 Prerequisites\n\n  * [Node.js](https://nodejs.org/) (\\\u003e= 16.x)\n  * [PostgreSQL](https://www.postgresql.org/)\n\n\n### 🔹 Clone the repository\n\n```bash\ngit clone https://github.com/ryantusi/CRUD-Full-Stack-PERN-App.git\ncd CRUD-Full-Stack-PERN-App\n```\n\n### 🔹 Backend Setup\n\n```bash\ncd backend\nnpm install\n```\n\nCreate a `.env` file in `/backend` and add:\n\n```bash\nDATABASE_URL=your_postgres_connection_string\nNODE_ENV=development\nPORT=5000\n```\n\nStart the backend server:\n\n```bash\nnpm start\n```\n\nBy default, runs on `http://localhost:8000`\n\n### 🔹 Frontend Setup\n\n```bash\ncd frontend\nnpm install\n```\n\nCreate a `.env` file in `/frontend` and add:\n\n```bash\nVITE_API_URL=http://localhost:8000\n```\n\nRun the frontend dev server:\n\n```bash\nnpm run dev\n```\n\nBy default, runs on `http://localhost:5173`\n\n\n## 🚀 Deployment\n\n### 🔹 Backend (Render)\n\n1.  Push code to GitHub\n2.  Create a new Web Service on Render\n3.  Connect repo → Select `backend/` as root → `npm start` as start command\n4.  Add `DATABASE_URL` in environment variables\n5.  Deploy\\!\n\n### 🔹 Frontend (Netlify)\n\n1.  Go to Netlify → New Site\n2.  Connect repo → Base directory: `frontend`\n3.  Build command: `npm run build`\n4.  Publish directory: `frontend/dist`\n5.  Add `VITE_API_URL` pointing to your Render backend URL in Netlify environment variables\n6.  Deploy\\!\n\n-----\n\n## 📖 API Endpoints\n\n| Method | Endpoint | Description |\n| :--- | :--- | :--- |\n| `GET` | `/` | Get all members |\n| `POST` | `/create` | Add a new member |\n| `PUT` | `/update/:id` | Update member by ID |\n| `DELETE` | `/remove/:id` | Delete member by ID |\n\n\n## 📝 License\n\nThis project is licensed under the Creative Commons License.\n\n## 🤝 Contributing\n\nPull requests are welcome\\! For major changes, please open an issue first to discuss what you would like to change.\n\n-----\n\n## ⭐ Show Your Support\n\nIf you like this project, please ⭐ the repo\\!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryantusi%2Fcrud-full-stack-pern-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryantusi%2Fcrud-full-stack-pern-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryantusi%2Fcrud-full-stack-pern-app/lists"}