Welcome to the Beach Journal app! This is my final project for the Flatiron School. It allows users to create and save beaches, as well as write journal entries for those beaches. This repository contains the React/Redux frontend of the project.
The backend for the Beach Journal can be found here: https://github.com/Sdcrouse/beach-journal-backend
- Click Here to view a demo of the Beach Journal.
- Click Here to read my blog post about the Beach Journal.
- Click Here to watch the Beach Journal's mock assessment, which I did with other students.
Follow these steps to start up the Beach Journal app:
- Fork and clone this repository onto your own computer and run
cd beach-journal-client
. - Navigate to the backend repository and follow the installation instructions, up to and including starting the Rails server.
- From the
beach-journal-client
directory, runnpm install
andnpm start
.
You're all set to use this app!
The Beach Journal app is a single-page application that serves two main purposes: Saving information about your favorite beaches and keeping a journal of your beach trips.
Once the app loads, you can do any of the following:
- Create a new beach by navigating to the "New Beach" page and filling out the form.
- On that form, you can fill out a beach's location and general information.
- You can also add an attraction with the "Add Attraction" button. Any attractions that you create for a beach will be sorted by their categories.
- Once you submit the form, you will be redirected to the "Your Saved Beaches" page. Scroll down to the bottom to view your new beach.
- Special note: If this is your first time using the app, you will need to create a new beach before you can write a journal entry for it.
- Click on the "View Saved Beaches" button to see a list of all of the beaches you've created.
- On that page, click "View Beach" to check out the information that you've written about a beach. Or, click "Delete Beach" to delete the beach and its journal entries.
- To write a journal entry for a beach, just go to that beach's page, click on the "New Journal Entry" button, and fill out the form.
- Every journal entry needs a date and text. However, if you want to make your journal entry more like a blog post, you also have the option to give it a title and/or topics.
- Once you submit the form, you can check out your new journal entry at the bottom of the page.
- You also have the option of deleting any of your journal entries; just click on its "Delete Journal Entry" button.
Please feel free to raise a new Issue on my repository if you have any problems with my app (installation, usage, bugs, etc), or if you have suggestions for a new feature. Pull requests are also welcome.
Contributors are expected to follow the project's code of conduct. This can be viewed in the CODE_OF_CONDUCT.md file.
Licensed under the MIT License.
This project was bootstrapped with Create React App.
In addition to the Node packages provided by Create React App, the following packages were used:
To see how I wireframed part of the Beach Journal app, check out this Figma file.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify