Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzenis-h/reactive-places
App built for the purpose of practicing the MERN stack.
https://github.com/dzenis-h/reactive-places
css3 es7 express google-maps-api html5 javascript jsx mongodb mongoose react
Last synced: 1 day ago
JSON representation
App built for the purpose of practicing the MERN stack.
- Host: GitHub
- URL: https://github.com/dzenis-h/reactive-places
- Owner: dzenis-h
- Created: 2020-02-20T23:32:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-18T14:44:09.000Z (over 1 year ago)
- Last Synced: 2023-06-19T14:17:08.703Z (over 1 year ago)
- Topics: css3, es7, express, google-maps-api, html5, javascript, jsx, mongodb, mongoose, react
- Language: JavaScript
- Size: 1.38 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##
![GitHub repo size](https://img.shields.io/github/repo-size/dzenis-h/reactive-places)
![GitHub contributors](https://img.shields.io/github/contributors/dzenis-h/reactive-places)
![GitHub stars](https://img.shields.io/github/stars/dzenis-h/reactive-places?style=social)
![GitHub forks](https://img.shields.io/github/forks/dzenis-h/reactive-places?style=social)
[![LinkedIn Follow](https://img.shields.io/badge/-Follow-blue?style=social&logo=linkedin&link=https://www.linkedin.com/in/dzenis-h/)](https://www.linkedin.com/in/dzenis-h/)
[![GitHub Follow](https://img.shields.io/badge/-Follow-black?style=social&logo=github&link=https://github.com/dzenis-h)](https://github.com/dzenis-h)##
# πΊοΈ Reactive Places
Reactive Places is an app built for the purpose of practicing the MERN stack. It allows users to create and share places they have visited or want to visit, with images and location data.
![Screenshot of Reactive Places](https://drive.google.com/uc?export=view&id=1K8qzyRN-WFGxd-yeAUah8Fpl-ilbQzoO)
## π Overview
Reactive Places is a full-stack web application that uses React, MongoDB, Express, and Node.js to create a dynamic and interactive user interface. The app also uses Google Maps API, Mongoose, JSX, CSS3, and ES7 to enhance the functionality and design of the app. The app follows the MVC pattern and uses custom hooks for authentication and authorization.
## π οΈ Tech Stack
| Tech | Docs | Description |
| --- | --- | --- |
| ![React](https://img.shields.io/badge/-React-61DAFB?logo=react&logoColor=white&style=for-the-badge) | [React](https://reactjs.org/docs/getting-started.html) | A JavaScript library for building user interfaces |
| ![MongoDB](https://img.shields.io/badge/-MongoDB-47A248?logo=mongodb&logoColor=white&style=for-the-badge) | [MongoDB](https://docs.mongodb.com/) | A cross-platform document-oriented database system |
| ![Express](https://img.shields.io/badge/-Express-000000?logo=express&logoColor=white&style=for-the-badge) | [Express](https://expressjs.com/en/4x/api.html) | A web framework for Node.js |
| ![Node.js](https://img.shields.io/badge/-Node.js-339933?logo=node.js&logoColor=white&style=for-the-badge) | [Node.js](https://nodejs.org/en/docs/) | A JavaScript runtime environment |
| ![Google Maps API](https://img.shields.io/badge/-Google%20Maps%20API-4285F4?logo=google-maps&logoColor=white&style=for-the-badge) | [Google Maps API](https://developers.google.com/maps/documentation) | A web service that provides location data and map features |
| ![Mongoose](https://img.shields.io/badge/-Mongoose-880000?logo=mongoose&logoColor=white&style=for-the-badge) | [Mongoose](https://mongoosejs.com/docs/guide.html) | An object data modeling library for MongoDB |
| ![JSX](https://img.shields.io/badge/-JSX-61DAFB?logo=react&logoColor=white&style=for-the-badge) | [JSX](https://reactjs.org/docs/introducing-jsx.html) | A syntax extension for JavaScript that allows writing HTML-like elements |
| ![CSS3](https://img.shields.io/badge/-CSS3-1572B6?logo=css3&logoColor=white&style=for-the-badge) | [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS) | A style sheet language for designing web pages |
| ![ES7](https://img.shields.io/badge/-ES7-F7DF1E?logo=javascript&logoColor=black&style=for-the-badge) | [ES7](https://www.ecma-international.org/ecma-262/7.0/index.html) | The seventh edition of the ECMAScript standard |## βοΈ Setup
To start using this example:
1. Clone this repo with `git clone`
2. Go inside of the config file (`./backend/config/config_dev.js`) and add your own credentials
3. Edit the HTML script tag inside of the FE folder (`./frontend/public/index.html`) and add your own API key
4. Run `npm install` in the root, backend, and frontend folders
5. Afterward, just run `npm start` inside of the root folder## π License
This project is licensed under the MIT License. See the [LICENSE](https://docs.google.com/document/d/11WK7tVoTFRMcWCuGZQCRWxEsDUEJ_6ArtfV-NjWcBCU/edit?usp=sharing) file for more details.
## π«‘ Contributing
Contributions are always welcome! If you would like to contribute to this project, please follow these steps:
1. Fork the repository. π΄
2. Create a new branch. π΅
3. Make your changes and test them thoroughly. π¨βπ»
4. Submit a pull request. β
## Credits π¨π»βπ»This repo was created by [Dzenis H.](https://dzenis.tech)
Contributions are more than welcome. π«‘
If you like what you see, please consider giving a βοΈ