diff --git a/README.md b/README.md index fb1ae6d..e3fef50 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,26 @@ This is the starter for the Flask React project. +## Tools Used +![Postgres](https://img.shields.io/badge/postgres-%23316192.svg?style=for-the-badge&logo=postgresql&logoColor=white) ![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white) ![Flask](https://img.shields.io/badge/flask-%23000.svg?style=for-the-badge&logo=flask&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) ![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54) + +## Index +![image](https://github.com/PjSingh22/Zesty/assets/47789898/c0c715aa-d140-4069-86a0-1a237ae58c7c) + +## Listing +![image](https://github.com/PjSingh22/Zesty/assets/47789898/2dbce85c-dd5d-4f61-b8d6-d0698885b1e3) + +## Favorites +![image](https://github.com/PjSingh22/Zesty/assets/47789898/cae7d153-e954-4e5b-ab6b-ffb801343472) + +## Cart +![image](https://github.com/PjSingh22/Zesty/assets/47789898/2cd21183-755c-45e3-8285-29f248a52772) + + +## My Thoughts +working on this capstone project was pretty fun. It seemed daunting at first with all the features and coming up with how to implement them. Slowly it came along and I had a lot of fun tackling all the problems that came about. Working with Flask for the back end was really nice since Flask makes creating routes and serving assets really easy. Once I got the hang of redux then creating stores and manipulating what is returned was pretty easy. The styling of the application was cool since I got to play around with many different CSS properties that I didn't have much experience with before. Overall I liked that I also went above and beyond and added extra features such as search functionality and liking listings to save to your favorites page. + + ## Getting started 1. Clone this repository (only this branch) @@ -40,109 +60,3 @@ This is the starter for the Flask React project. ``` 7. To run the React App in development, checkout the [README](./react-app/README.md) inside the `react-app` directory. - - -## Deployment through Render.com - -First, refer to your Render.com deployment articles for more detailed -instructions about getting started with [Render.com], creating a production -database, and deployment debugging tips. - -From the [Dashboard], click on the "New +" button in the navigation bar, and -click on "Web Service" to create the application that will be deployed. - -Look for the name of the application you want to deploy, and click the "Connect" -button to the right of the name. - -Now, fill out the form to configure the build and start commands, as well as add -the environment variables to properly deploy the application. - -### Part A: Configure the Start and Build Commands - -Start by giving your application a name. - -Leave the root directory field blank. By default, Render will run commands from -the root directory. - -Make sure the Environment field is set set to "Python 3", the Region is set to -the location closest to you, and the Branch is set to "main". - -Next, add your Build command. This is a script that should include everything -that needs to happen _before_ starting the server. - -For your Flask project, enter the following command into the Build field, all in -one line: - -```shell -# build command - enter all in one line -npm install --prefix react-app && -npm run build --prefix react-app && -pip install -r requirements.txt && -pip install psycopg2 && -flask db upgrade && -flask seed all -``` - -This script will install dependencies for the frontend, and run the build -command in the __package.json__ file for the frontend, which builds the React -application. Then, it will install the dependencies needed for the Python -backend, and run the migration and seed files. - -Now, add your start command in the Start field: - -```shell -# start script -gunicorn app:app -``` - -_If you are using websockets, use the following start command instead for increased performance:_ - -`gunicorn --worker-class eventlet -w 1 app:app` - -### Part B: Add the Environment Variables - -Click on the "Advanced" button at the bottom of the form to configure the -environment variables your application needs to access to run properly. In the -development environment, you have been securing these variables in the __.env__ -file, which has been removed from source control. In this step, you will need to -input the keys and values for the environment variables you need for production -into the Render GUI. - -Click on "Add Environment Variable" to start adding all of the variables you -need for the production environment. - -Add the following keys and values in the Render GUI form: - -- SECRET_KEY (click "Generate" to generate a secure secret for production) -- FLASK_ENV production -- FLASK_APP app -- SCHEMA (your unique schema name, in snake_case) -- REACT_APP_BASE_URL (use render.com url, located at top of page, similar to - https://this-application-name.onrender.com) - -In a new tab, navigate to your dashboard and click on your Postgres database -instance. - -Add the following keys and values: - -- DATABASE_URL (copy value from Internal Database URL field) - -_Note: Add any other keys and values that may be present in your local __.env__ -file. As you work to further develop your project, you may need to add more -environment variables to your local __.env__ file. Make sure you add these -environment variables to the Render GUI as well for the next deployment._ - -Next, choose "Yes" for the Auto-Deploy field. This will re-deploy your -application every time you push to main. - -Now, you are finally ready to deploy! Click "Create Web Service" to deploy your -project. The deployment process will likely take about 10-15 minutes if -everything works as expected. You can monitor the logs to see your build and -start commands being executed, and see any errors in the build process. - -When deployment is complete, open your deployed site and check to see if you -successfully deployed your Flask application to Render! You can find the URL for -your site just below the name of the Web Service at the top of the page. - -[Render.com]: https://render.com/ -[Dashboard]: https://dashboard.render.com/ \ No newline at end of file