{"id":24914007,"url":"https://github.com/rayray39/peng","last_synced_at":"2026-04-13T06:02:09.866Z","repository":{"id":273378630,"uuid":"918868079","full_name":"rayray39/peng","owner":"rayray39","description":"Peng is a no nonsense dating platform developed using ReactJS, Express.JS and Sqlite3","archived":false,"fork":false,"pushed_at":"2025-03-03T16:17:36.000Z","size":3313,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T05:25:03.334Z","etag":null,"topics":["express-js","fullstack-development","material-ui","reactjs","sqlite3-database","webdevelopment"],"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/rayray39.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-01-19T04:23:56.000Z","updated_at":"2025-03-03T16:17:39.000Z","dependencies_parsed_at":"2025-01-20T15:36:56.247Z","dependency_job_id":"9ae47f43-1f6d-4fb6-a003-fadcf22fdf1d","html_url":"https://github.com/rayray39/peng","commit_stats":null,"previous_names":["rayray39/peng"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rayray39/peng","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayray39%2Fpeng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayray39%2Fpeng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayray39%2Fpeng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayray39%2Fpeng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayray39","download_url":"https://codeload.github.com/rayray39/peng/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayray39%2Fpeng/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268192592,"owners_count":24210541,"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-08-01T02:00:08.611Z","response_time":67,"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":["express-js","fullstack-development","material-ui","reactjs","sqlite3-database","webdevelopment"],"created_at":"2025-02-02T06:15:49.679Z","updated_at":"2026-04-13T06:02:09.813Z","avatar_url":"https://github.com/rayray39.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Peng: A no nonsense dating platform for the serious  \n\u003cp align='center'\u003e\n    \u003cimg src='./src/assets/peng_logo.jpg' width='75%'\u003e\n\u003c/p\u003e\n\nPeng was designed for people who are serious about making meaningful connections. With a streamlined user profile setup journey—including bio creation, hobby selection, and image uploads—Peng ensures users put their best foot forward. The platform features a familiar swipe mechanism to discover potential matches, and once a match is made, users can instantly chat to take things further. Built for simplicity and authenticity, Peng prioritizes quality over gimmicks, making dating simple and intentional.  \n\nThe main features are:\n\n| Features             | Description |\n| -------------------- | ----------- |\n| Login/Create account | When a user logs in or when a new account is created, a JWT (JSON Web Token) is issued to authenticate the user and provide access to subsequent pages. This JWT is stored in the user's local storage for retrieval.     |\n| Fill in bio          | Users are to fill in a bio (i.e., a short description) that describes themselves.        |\n| Select hobbies       | Users are to select 3 hobbies, each hobby chip was designed based off Material UI's Chip component.        |\n| Upload images        | Users are to select 3 images from files and images are subsequently uploaded to Cloudinary for cloud storage.        |\n| Messaging            | Users can message liked users and the messages are dynamically updated and sent to the receipient immediately.        |\n\n## Contents\n- [Usage](#usage)\n- [Learning points](#learning-points)\n    - [Frontend](#frontend)\n    - [Backend](#backend)\n    - [Others](#others)\n- [Guides](#guides)\n    - [Dev guide](#dev-guide)\n\n## Usage\nVisit the website [here]()  \n**not deployed just yet, still finishing some tweaks...\n\n## Learning Points\nThis section covers the technical lessons learnt while building Peng.  \n\n### Frontend\n- state management and dynamically updating UI using controlled components and React's hooks (eg. useState, useEffect) for a smooth user experience.\n- smooth navigation between pages using React Router and managing dynamic routes with parameters.\n- created a simple authentication method to prevent unauthenticated access into pages.\n- understanding when to pass data via props vs. using global state/context helped maintain a clean and maintainable component structure.\n- implemented controlled inputs for login, signup, and chat messages with client-side validations.\n- proper handling of API errors and displaying user-friendly messages\n- levraged Material UI's simplified and consistently styled components for UI/UX, adding custom styling and behaviour for a smoother experience. \n- **designed features include**: login/create account, first-time user profile setup journey, messaging feature, swipe and match feature.\n\n### Backend\n- database design and queries using Sqlite3, management of multiple tables and relations.\n- store user images in cloud storage (Cloudinary) via API.\n- implemented token-based authentication using JWT ensured secure messaging. \n- protecting API routes with middleware prevented unauthorized access.\n- designing RESTful API endpoints for data transfer to frontend.\n- designing RESTful API endpoints for debugging and testing of database.\n\n### Others\n- version control using git and github.\n- [Cloudinary](https://cloudinary.com/)'s image cloud storage and API.\n- [Material UI](https://mui.com/).\n- deployment using [vercel](https://vercel.com/)\n\n## Guides\n### Dev guide\nClick [here]() for the dev guide  \n**not written yet, will be uploaded soon!\n\n# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayray39%2Fpeng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayray39%2Fpeng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayray39%2Fpeng/lists"}