cvryn / pinnovate

1 stars 0 forks source link

Pinnovate

Welcome to Pinnovate, a versatile platform for users to discover, save, and organize inspiring content. By allowing users to create and manage personalized boards by saving images and other media, this app aims to help users explore various interests, find new ideas, and stay organized.

Discover Various Interests

Pinnovate is designed to be a dynamic canvas for exploring a wide range of interests and passions. Users can dive into diverse categories, from animals and nature to technology and DIY projects. The app's intuitive search and discovery features ensure that users can find content that resonates with their unique tastes and hobbies, making it a powerful tool for curiosity and creativity.

Sharing With Others

In addition to discovering and organizing content, Pinnovate empowers users to share their own creations and content. Whether it is a stunning photo, a helpful article, or a groundbreaking idea, users can post their content directly to the platform, enriching the community with fresh perspectives and insights.

Sharing your own content not only allows you to showcase your interests and ideas but also fosters engagement with other users. This collaborative environment encourages the exchange of ideas and helps build a supportive network around shared passions.

Live Site Link

https://pinnovate.onrender.com

Live Site Preview

Pinnovate Homepage

Homepage

Pinnovate Pin Details and Comments

Pin Details and Comments

Pinnovate Manage Your Boards

Pin Manage Boards

Pinnovate Board Pins

Pin Board Pins

Key Features

Technologies Used

Python JavaScript Flask React Redux React Router Postgres AWS Render

Getting started

  1. Clone this repository (only this branch).

  2. Install dependencies.

    pipenv install -r requirements.txt
  3. Create a .env file based on the example with proper settings for your development environment.

  4. Make sure the SQLite3 database connection URL is in the .env file.

  5. This starter organizes all tables inside the flask_schema schema, defined by the SCHEMA environment variable. Replace the value for SCHEMA with a unique name, making sure you use the snake_case convention.

  6. Get into your pipenv, migrate your database, seed your database, and run your Flask app:

    pipenv shell
    flask db upgrade
    flask seed all
    flask run
  7. The React frontend has no styling applied. Copy the .css files from your Authenticate Me project into the corresponding locations in the react-vite folder to give your project a unique look.

  8. To run the React frontend in development, cd into the react-vite directory and run npm i to install dependencies. Next, run npm run build to create the dist folder. The starter has modified the npm run build command to include the --watch flag. This flag will rebuild the dist folder whenever you change your code, keeping the production version up to date.

API Documentation - Backend API Routes

USER AUTHENTICATION/AUTHORIZATION

All endpoints that require authentication

All endpoints that require a current user to be logged in.

All endpoints that require proper authorization

All endpoints that require authentication and the current user does not have the correct role(s) or permission(s).

Get the Current User

Returns the information about the current user that is logged in.

Log In a User

Logs in a current user with valid credentials and returns the current user's information.

Sign Up a User

Creates a new user, logs them in as the current user, and returns the current user's information.

Pin Routes

Get all Pin

Returns all the Pins

Get details of a Pin from Pin Id

Returns the details of a Pin specified by its id.

Create an Pin

Creates and returns a new Pin.

Edit a Pin

Updates and returns an existing pin.

Delete an Pin

Deletes an existing Pin.

Comments Routes

Get all Comments of the Current User

Returns all the Comments.

Get all Comments by a Pin's id

Returns all the Comments that belong to an Pin specified by id.

Create a Comment for an Pin based on the Pin's id

Create and return a new Comment for a Pin specified by id.

Edit a Comment

Update and return an existing Comment.

Delete a Comment

Delete an existing Comment.

Board Routes

Get all of the Current User's Board(s)

Return all the Boards belonging to the Currently Logged in User

Create the Board of the Current User by User Id

Create and return the Board of the Current User by User Id.

Delete Pin from a Board

Delete Pin(s) from a Board

Tags Routes

Get all Tags

Return all the Tags

Get Tag(s) associated with a Pin Id

Return all the Tags

Create a new Tag

Create and return the newly created Tag

Add Tags to Pins that belong to Currently Logged in User

Add Tags to a Pin

Edit Existing Tags if Created by Currently Logged in User

Edit Existing User Created Tags

Delete Tag from a Pin

Delete Tag(s) from a Pin

Deployment through Render.com

First, recall that Vite is a development dependency, so it will not be used in production. This means that you must already have the dist folder located in the root of your react-vite folder when you push to GitHub. This dist folder contains your React code and all necessary dependencies minified and bundled into a smaller footprint, ready to be served from your Python API.

Begin deployment by running npm run build in your react-vite folder and pushing any changes to GitHub.

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 Render Dashboard, click on the "New +" button in the navigation bar, and click on "Web Service" to create the application that will be deployed.

Select that you want to "Build and deploy from a Git repository" and click "Next". On the next page, find the name of the application repo you want to deploy and click the "Connect" button to the right of the name.

Now you need to fill out the form to configure your app. Most of the setup will be handled by the Dockerfile, but you do need to fill in a few fields.

Start by giving your application a name.

Make sure the Region is set to the location closest to you, the Branch is set to "main", and Runtime is set to "Docker". You can leave the Root Directory field blank. (By default, Render will run commands from the root directory.)

Select "Free" as your Instance Type.

Add environment variables

In the development environment, you have been securing your environment variables in a .env file, which has been removed from source control (i.e., the file is gitignored). In this step, you will need to input the keys and values for the environment variables you need for production into the Render GUI.

Add the following keys and values in the Render GUI form:

In a new tab, navigate to your dashboard and click on your Postgres database instance.

Add the following keys and values:

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.

Deploy

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 Dockerfile commands being executed and any errors that occur.

When deployment is complete, open your deployed site and check to see that you have 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.

Note: By default, Render will set Auto-Deploy for your project to true. This setting will cause Render to re-deploy your application every time you push to main, always keeping it up to date.