This is the README for the final group project from App Academy. The project was inspired by Instagram and build using Javascript, React.js and Redux for the front end and Python with Flask for the backend.
-
Clone the project repository from https://github.com/hauck29/PythonGroupProject.git
-
Rename the folder to whatever you want.
-
Install dependencies
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt -
Create a .env file based on the example with proper settings for your development environment
-
Setup your PostgreSQL user, password and database and make sure it matches your .env file
-
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
-
To run the React App in development, checkout the README inside the
react-appdirectory ORcdinto thereact-appfolder and runnpm installto install node package manager dependencies.
IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:
pipenv lock -r > requirements.txtALSO IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.
To start the server, run
flask runfrom the root directory, then runnpm startfrom thereact-appdirectory. This will allow you to make requests to http://localhost:3000 using any client (browser and Postman). To stop the server from listening to requests, press CTRL + c for Windows/Linux or CMD + c for MacOS in the terminal that you started the server (wherever you >ran npm start).
The live link for this project is located here: https://instagramme-mambas.herokuapp.com/
You can log in as a demo user with the
Demo Loginbutton on the login form or landing page.
You can log in as a user of your choice, using the credentials you selected when creating an account.
You can add posts with the
Addbutton in the Navigation Component
You can edit your posts with the
Editbutton.
You can delete your posts with the
Deletebutton.
You can add comments in the
Add a commentblock with theSubmitbutton.
You can edit your comments with the
Editbutton.
You can delete your comments with the
Deletebutton.
This project was done during the week of December 6th - 12th, 2021.
Sign up/Login with credentials
Read, add, edit and remove posts from the posts feed (full CRUD)
Read, add, edit and remove comments from the comments feed of a particular post (full CRUD)
Read, add, and remove a user that is being followed (full CRUD, edit/update is nonsensical here, as the combination of add and remove is the edit)
Comments - Commetns feed and CommentForm for comment creation
DisplayBlockFollowers - Displays a block with your followers
DisplayFollowers - Shows who your current followers are on profile page
DisplayFollowing - Shows who you are followiung on your profile page
DisplayUnfollow - Provides a button to allow a user to unfollow another user
DisplayPostModal - Modal for displaying a single post and its comments
Feed - This is where all the posts load into
FollowingFeed - This is the feed for the users the current user is following
Footer - This is where developer links live
LandingPage - This is the page that most closely emulates Instagram
LoginPage - Allows for a user to login using credentials
NavigationBar - Provides icon links to different routes on the site
ProfileButton - Allows functionality of profile options
SignupPage - Provides a form to allow a user to signup for Instagramme
UploadModal - Modal for uploading a photo and adding a caption
auth - Provided with starter
NavBar - Provided with starter
User - Provided with starter
UserList - Provided with starter
<>
<BrowserRouter>
<NavigationBar />
<Switch>
<Route path="/login" exact={true}>
<LoginForm />
</Route>
<Route path="/sign-up" exact={true}>
<SignUpForm />
</Route>
<ProtectedRoute path="/users" exact={true}>
<UsersList />
</ProtectedRoute>
<ProtectedRoute path="/users/:userId" exact={true}>
<User />
</ProtectedRoute>
<ProtectedRoute path="/" exact={true}>
<Feed />
</ProtectedRoute>
</Switch>
</BrowserRouter>
</>
-- Posts
Read One:
posts_router.post('/<int:id>')
Read All:
posts_router.post('/')
Create:
posts_router.post('/')
Update:
posts_router.post('/')
Delete:
posts_router.post('/<int:id>')
Like/unlike posts and comments
Continously refine css to look modern
Search feature
Explore feature
