React-Redux Notes Application

A simple react app that utilize core concepts in reactjs to build a note application.
· Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
3. Roadmap
4. Contributing
5. Contact

About The Project

This project is a simple note application that I plan to build out to mimic Google Keep. This project was simply created to help me on my journey in learning reactjs core concepts. When learning new frameworks, I try to focus more on the framework features rather than an interesting and exciting concept. A note app as basic as it is provides me with enough of every day web dev task i.e Create something, read/list something, edit something and delete something, that I could use to build and focus on react.

(back to top)

Built With

• React.js
• Redux
• Bootstrap
• Node
• Express
• TypeScript
• MongoDB

(back to top)

Getting Started

Below you can find instructions on how to launch the application using Docker or manually setup each service. To get a local copy up and running follow these simple example steps.

Docker Prerequisites

You will need to have docker installed on your machine. Please revert to the offical docker guide to help you setup Docker for your specfic OS. Once you have docker installed, you can follow the steps below.

Docker Setup Installation

Before getting started ensure you do not have any services running on the ports, 3000, 8081 and 27017 as these ports will need to be utilized the docker containers.

2. Clone the repo

   git clone https://github.com/apettiigrew/notes-app.git

3. Navigate to the root folder

   cd notes-app

4. Run the following command

   docker-compose up

5. Once all services are up, navigate to http://localhost:3000 to start playing with the app.

Manual Prerequisites

Perhaps, you're not huge fan of Docker and would like to launch the apps manually, you can find instructions below. Before getting started You will need have node.js and mongodb installed on your machine.

Manual Setup

Before getting started ensure you do not have any services running on the ports, 3000, 8081 and 27017 as these ports will need to be utilized by the different services.

2. Clone the repo

   git clone https://github.com/apettiigrew/notes-app.git

3. Navigate to the root folder

   cd notes-app

Mongodb Setup

4. The application utilize a very barebones mongodb installed, no authentication is required, just ensure mongodb is up and running on the default port.

Node.js Setup

5. Naviate to the node-backend folder

   cd node-backend

6. Run the following commands

   npm install
   npm run dev

React.js Setup

5. Naviate to the react-frontend folder

   cd react-frontend

6. Run the following commands

   npm install
   npm run start:dev

(back to top)

Roadmap

• [] Add the pin notes
• [] Add labels on notes
• [] Add make a copy feature
• [] Add search notes feature
• [] Add multiselect notes feature

(back to top)

Contributing

If you want to practice your react knowledge feel free to add any features you think might make this application become awesome. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

Andrew Pettigrew - @apettiigrew - [email protected]

Project Link: https://github.com/apettiigrew/notes-app

(back to top)