SEI Mariposa Capstone Project: MERN app for National Parks Find Your Park
- MongoDB/Mongoose
- Express
- React
- Node.js
- Vite
- JWT Simple
- CSS framework: Tailwind
- Git GitHub
- Visual Studio Code
- Heroku
Clone respository or download controllers, models, public, and views folders folders and files within.
Run npm install to install all dependencies listed in the package.json file.
Update .env file with your database connection string, api key and assign port 3000.
Enter command npm run backend to connect to MongoDB. Open local server on port 3000 to view the page in the browser.
Navigate to localhost:3000/seed to seed inital data to MongoDB database.
Enter command npm run frontend to start the React server.
Navigate to localhost:5173 to view the page in the browser.
- National Park Service API, parks endpoint: to review documentation for this API and request an API key, visit https://www.nps.gov/subjects/developer/get-started.htm
- Resource for responsive navbar using tailwind and react: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/navbars
- 404 Image: Photo by Daniel Jensen on Unsplash
- About Image: Photo by Mick Haupt on Unsplash
- As a user of the national park tracker website, I want to be able to view a comprehensive list of all the national parks in order to plan my future trips.
- As a user, I want to be able to click on a specific national park from the list in order to view additional information about that park such as its address, location, park hours, description, and any other relevant details.
- As a user, I want to be able to create tips about a particular national park that I can later edit or delete, so that I can share my experiences and recommendations with other users of the website.
- As a user, I want to be able to mark a national park as visited in order to keep track of which parks I have already explored.
- As a user, I want to be able to toggle between a list of national parks that I have visited and those that I have not visited yet, so that I can easily keep track of my progress and plan future trips accordingly.
| URL | REST Route | HTTP Verb | CRUD Action |
|---|---|---|---|
| /api/tips/park/:nationaParkId | index | GET | read |
| /api/tips | create | POST | create |
| /api/tips/:id | edit | GET | read |
| /api/tips/:id | update | PATCH/PUT | update |
| /api/tips/:id | destroy | DELETE | delete |
| /myparks | index | GET | read |
| / | index | GET | read |
| /deatils/:id | show | GET | read |
- Authentication was challenging to implement. I was able to get the login and sign up forms to work, but I need to make additional updates to the tips components and navbar to improve the user experience.
Find Your Park will continue to grow in the coming months to include passport authentication, ability to filter the index page, and search functionality for national parks. Stay tuned.