Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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 ⭐️