React Project

The purpose of this project is to demonstrate what I have learned about JavaScript/React thus far. This project will be a recreation of my CorgiDev website. I added an extra blog page that interacts with an API to display posts and a form to add posts.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js version 10.5.0+
• Npm version 6.4.1+
• A browser (tested with Google Chrome, IE, Edge and FireFox)
• A terminal that can use bash commands. GitBash recommended.

Installing

1. Stop reading this for a moment and go download the project from GitHub.
2. Open a terminal and navigate to inside the root folder of the project.
3. Use the command 'npm install' to install any missing plugins needed by the site. This may take a few minutes......... ಠ_ಠ
4. Type 'npm start' to start the site running. Leave the terminal open while viewing the site or it will stop running.
5. The way this is set up it may open a browser window automatically. In case it does not, open a browser window and naviagte to 'localhost:3000' to access the site. The terminal will also provide you with an 'ipaddress:3000' version of the web address. This can be used as an alternative in the event that the localhost:3000 option does not work. The initial load of the page sometimes takes a moment. If it opens a page that says it can't load the page, wait a moment and then refresh the page. For some reason I have had that happen off and on.

Built With

• JavaScript - A dynamic programming language generally used to add dynamic features to a website.
• React - A JavaScript library.
• BootStrap - A popular framework that allows for easier visual customization.
• React-Router-Dom - This is a module of the React Router package.
• Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine.
• Redux - An open-source JavaScript library for managing application state.
• React-Helmet - Allows you to set anything in the head of the document.
• Firebase - Firebase is a set of app tools offered by Google to help with hosting, storage, authentication, and more. I used their database tools.

Notes

None

Authors

• EGrayTech - Initial work - (╯°□°）╯︵ ┻━┻

Acknowledgments

• Patrick Chakravorty (Software Developer) - His article,Redux-A CRUD Example, on creating a CRUD app with Redux and React-Context really helped me to have a better grasp of how things work in general. Though I ended up swapping out a lot of what he did in order to connect to a Firebase database for data persistence and an API connection.

Project Requirements

• Responsive design (can be done with bootstrap)
• Project is a React application capable of implementing the React framework.
• At least 3 nagivatable routes using React Router
• Must consume an API of your choosing. The API must accomplish one of the following:
  1. Fully CRUD-supported API and implement all 4 CRUD operations (Create, Read, Update, and Delete)
  2. Select a read-only API and implement a "rich" interface using multiple resources. You should implement/read at least 5 resources, but are encouraged to pull in many elements.
• Your code has comments
• Must include a ReadMe.md located in the top level directory of your project, which includes the following:
  1. A brief description of your project’s purpose and functionality (ex: “My Code Louisville FSJS Project. A web app designed to let users create their own To-Do lists, add items to the lists, and mark them as complete.”)
  2. Detailed steps of how to start the application, and any prerequisites to run it.
• Your code is in a GitHub repo on your own GitHub account.
• You cannot re-use a sample Treehouse project.
• Exceptions may be granted to these requirements if you have a particular project in mind that does not meet these requirements. Please discuss with your mentors or Brian if you have a project in mind.