Cody helped me https://plainenglish.io/blog/how-to-implement-a-search-bar-in-react-js https://dev.to/salehmubashar/search-bar-in-react-js-545l https://stackoverflow.com/questions/2803532/how-do-i-put-a-clear-button-inside-my-html-text-input-box-like-the-iphone-does https://stackoverflow.com/questions/36113367/how-to-make-image-buttons-in-jsx https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data https://react-bootstrap-v3.netlify.app/components/tooltips/ https://blog.logrocket.com/using-react-toastify-style-toast-messages/ https://stackoverflow.com/questions/51143800/how-to-set-match-password-in-react-js
You will be using this app to explore the architecture of a Full-Stack MERN Application.
You will need to install the following tools:
For this application, you will be using MongoDB Atlas (a cloud-based Mongo database) to save your data. However, to initialize the application and properly seed the database in the first place, you will need some local MongoDB tools.
Refer to Reading - MongoDB Atlas - Clusters and Connections for information on how to connect your application to MongoDB Atlas.
Follow along below for installing the local MongoDB tools.
Follow the guide here: Install MongoDB on MacOS
Follow the guide here: Install MongoDB on Linux
First, download the MongoDB Community Server MSI and install it. You can use all of the default options.
When that is finished installing, you can close "MongoDB Compass" if that pops up.
Then you must start the MongoDB Service:
- Click the start menu and type "services", Click the Services console.
- From the Services console, locate the MongoDB service (The list is alphabetical)
- Right-click on the MongoDB service and click Start.
Then download the MongoDB Database Tools
If you get stuck, you can reference the guide here: Install MongoDB on Windows
This app is configured to run both the frontend and the backend from the root directory of this project.
First, install all of the dependencies. You should only need to do this once.
npm install
You can start the entire application by doing:
npm run dev
Note that you must be in the root folder of this repository to run both the front and backend!
The front and back ends are held inside of packages/client and packages/server
If you cd into those folders, you can run them individually by using npm run dev.
During development, you can add dependencies to the frontend or backend from the root folder. For example:
npm install -w client react-router-dom
npm install -w server mongoose
This would add a "react-router-dom" dependency to the frontend, and a "mongoose" dependency to the backend.