{"id":19092766,"url":"https://github.com/basedhound/kpop-social_app_react","last_synced_at":"2025-10-06T03:54:52.239Z","repository":{"id":251906146,"uuid":"838799155","full_name":"basedhound/kpop-social_app_react","owner":"basedhound","description":"Fullstack social media platform inspired by Kpop culture, featuring React with cozy color palettes. The frontend uses Redux and Mantine, while the backend is built on Node/Express/MongoDB.","archived":false,"fork":false,"pushed_at":"2024-08-06T11:54:51.000Z","size":9503,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T07:44:48.611Z","etag":null,"topics":["axios","bcrypt","cors","dotenv","express","jsonwebtoken","jwt","mern","mongodb","mongoose","multer","node-js","nodemon","react","react-redux","react17","redux"],"latest_commit_sha":null,"homepage":"https://ksocial-fv.netlify.app","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/basedhound.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":"2024-08-06T11:15:31.000Z","updated_at":"2025-01-29T17:33:31.000Z","dependencies_parsed_at":"2024-08-06T13:28:11.021Z","dependency_job_id":"69d0b817-6206-42c1-aa7b-24e199d34853","html_url":"https://github.com/basedhound/kpop-social_app_react","commit_stats":null,"previous_names":["basedhound/kpop-social_app_react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/basedhound/kpop-social_app_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fkpop-social_app_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fkpop-social_app_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fkpop-social_app_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fkpop-social_app_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basedhound","download_url":"https://codeload.github.com/basedhound/kpop-social_app_react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fkpop-social_app_react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278556192,"owners_count":26006081,"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-10-06T02:00:05.630Z","response_time":65,"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":["axios","bcrypt","cors","dotenv","express","jsonwebtoken","jwt","mern","mongodb","mongoose","multer","node-js","nodemon","react","react-redux","react17","redux"],"created_at":"2024-11-09T03:21:49.472Z","updated_at":"2025-10-06T03:54:52.206Z","avatar_url":"https://github.com/basedhound.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://ksocial-fv.netlify.app\" target=\"_blank\"\u003e\n      \u003cimg src=\"client/public/preview.png\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eKPOP Social App\u003c/h3\u003e\n\u003c/div\u003e\n\n##  \u003cbr /\u003e 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n- ✨ [Introduction](#introduction)\n- ⚙️ [Tech Stack](#tech-stack)\n- 📝 [Features](#features)\n- 🚀 [Quick Start](#quick-start)\n\n##  \u003cbr /\u003e \u003ca name=\"introduction\"\u003e✨ Introduction\u003c/a\u003e\n\n**[EN]** A vibrant fullstack social media platform inspired by Kpop culture, built with React and featuring cozy, girly color palettes and aesthetics. The frontend leverages the Mantine library for UI components and Unicons for icons to deliver an engaging user experience. The backend is powered by Express, utilizing MongoDB for database management and includes essential packages such as bcrypt for password hashing, cors for cross-origin resource sharing, dotenv for environment variables, jsonwebtoken for authentication, multer for file uploads, and nodemon for development.\n\n**[FR]** Un réseau social fullstack inspiré par la culture Kpop, construit avec React. Le frontend utilise la bibliothèque Mantine pour les composants UI et Unicons pour les icônes afin d'offrir une expérience utilisateur engageante. Le backend est alimenté par Express, utilisant MongoDB pour la gestion de base de données et comprend des packages essentiels tels que bcrypt pour le hachage des mots de passe, cors pour le partage de ressources entre origines, dotenv pour les variables d'environnement, jsonwebtoken pour l'authentification, multer pour le téléchargement de fichiers et nodemon pour le développement.\n\n##  \u003cbr /\u003e \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. \n\n- [**Mantine**](https://mantine.dev/getting-started/) is a modern React component library designed to streamline the creation of scalable and accessible UIs. It offers a rich set of customizable components and hooks, empowering developers to build robust applications with efficiency and accessibility in mind.\n\n- [**React Unicons**](https://help.iconscout.com/hc/en-gb/articles/13811255780889-How-to-use-Unicons) is a versatile icon library for React applications, providing a wide range of high-quality icons that can be easily integrated into projects. It simplifies the process of adding icons to user interfaces, enhancing visual appeal and usability without compromising performance.\n\n- [**Axios**](https://axios-http.com/docs/intro) is a promise-based HTTP client for the browser and Node.js. It allows you to make asynchronous HTTP requests to REST endpoints and perform CRUD operations. Axios provides a simple-to-use API for sending HTTP requests and handling responses, including features like interceptors for request and response transformations, automatic JSON data transformations, and support for handling request cancellation.\n\n- [**Redux**](https://react-redux.js.org/introduction/getting-started) is a predictable state container for JavaScript apps, commonly used with libraries like React for managing application state. Redux centralizes the application's state in a single store, allowing you to write consistent, maintainable code with the ability to track state changes and debug easily. It relies on a unidirectional data flow, where actions are dispatched to reducers, which then update the state in an immutable way.\n\n- [**REST API**](https://blog.postman.com/rest-api-examples/) (Representational State Transfer Application Programming Interface) is a specific type of API that adheres to the principles of REST, an architectural style for designing networked applications. REST APIs use standard HTTP methods (GET, POST, PUT, DELETE) to interact with resources, which are typically represented in JSON or XML format. REST APIs are stateless, meaning each request from a client to the server must contain all the information needed to understand and process the request. This approach simplifies the interactions between client and server and ensures scalability and performance.\n\n- [**Node.js**](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows developers to execute JavaScript on the server side, enabling the creation of scalable and high-performance applications. Node.js's non-blocking, event-driven architecture makes it particularly suitable for building real-time, data-intensive applications.\n\n- [**NPM**](https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager) (Node Package Manager) is the default package manager for Node.js. It allows developers to install, share, and manage dependencies in their projects. NPM provides access to a vast repository of open-source packages, facilitating the rapid development and integration of new features.\n\n- [**Express**](https://expressjs.com/en/starter/installing.html) is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It facilitates the rapid development of Node-based web applications, with features like routing, middleware support, and template engines.\n\n- [**Bcrypt**](https://www.npmjs.com/package/bcrypt) is a library used to hash passwords, providing security by making it computationally difficult to reverse the hashing process. It includes features such as salting, which adds additional randomness to the hashes, making them more secure against dictionary attacks and brute-force attacks.\n\n- [**CORS**](https://www.npmjs.com/package/cors) (Cross-Origin Resource Sharing) is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. CORS is a security feature that allows or restricts requested resources on a web server depending on where the HTTP request was initiated.\n\n- [**Dotenv**](https://www.npmjs.com/package/dotenv) is a zero-dependency module that loads environment variables from a .env file into process.env. This package helps keep sensitive configuration data out of the codebase and allows different configurations for various environments like development, testing, and production.\n\n- [**Jsonwebtoken**](https://www.npmjs.com/package/jsonwebtoken) is a package that allows you to generate and verify JSON Web Tokens (JWT). JWTs are used for securely transmitting information between parties as a JSON object. They are commonly used for authentication and authorization processes.\n\n- [**Mongoose**](https://mongoosejs.com/docs/guide.html) is an ODM (Object Data Modeling) library for MongoDB and Node.js. It provides a straightforward, schema-based solution to model your application data, with built-in type casting, validation, query building, and business logic hooks.\n\n- [**Multer**](https://www.npmjs.com/package/multer) is a middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of the busboy library to make it easy to handle file uploads in an Express application.\n\n- [**Nodemon**](https://www.npmjs.com/package/nodemon) is a utility that automatically restarts your node application when file changes in the directory are detected. It is designed to increase productivity by reducing the manual task of stopping and restarting the application during development.\n\n\n\n## \u003cbr /\u003e \u003ca name=\"quick-start\"\u003e🚀 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n\u003cbr/\u003e**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\nInstall nodemon globally on your machine, open your terminal and run the following command:\n```bash\nnpm install -g nodemon\n```\n\n- **Nodemon** is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.\n\n\u003cbr/\u003e**Cloning the Repository**\n\n```bash\ngit clone {git remote URL}\n```\n\n\u003cbr/\u003e**Installation**\n\nLet's install the project dependencies, from your terminal, run:\n\n```bash\n# Navigate to the client directory\ncd client\n\n# Install the necessary dependencies for the client-side application\nnpm install\n# or\nyarn install\n\n# Navigate back to the root directory\ncd ..\n\n# Navigate to the server directory\ncd api\n\n# Install the necessary dependencies for the server-side application\nnpm install\n# or\nyarn install\n```\n\n\u003cbr/\u003e**Set Up Environment Variables**\n\nCreate a new file named `.env` inside the client folder and add the following content:\n\n```env\n# Must write \"REACT_APP\" or it won't work\nREACT_APP_PUBLIC_FOLDER=http://localhost:5000/images/\n```\n\nCreate a new file named `.env` inside the api folder and add the following content:\n\n```env\nMONGO_URI=\n\nPORT=5000\n\nJWT_KEY=\n```\n\nReplace the placeholder values with your actual respective account credentials:\n\n- [MongoDB](https://cloud.mongodb.com)\n\n\n\u003cbr/\u003e**Running the Project**\n\nInstallation will take a minute or two, but once that's done, you should be able to run the following command:\n\n```bash\n# Navigate to the client directory\ncd client\n\n# Start client\n# If `npm start` doesn't work, try updating the dependencies in `package.json`.\nnpm start\n# or\nyarn start\n\n# Navigate back to the root directory\ncd ..\n\n# Navigate to the server directory\ncd api\n\n# Start server\nnpm start\n# or\nyarn start\n```\n\nOpen [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Fkpop-social_app_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasedhound%2Fkpop-social_app_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Fkpop-social_app_react/lists"}