Social media app to share dogs' photos, created with ReactJS. InstaDogs is the final project of the React course from Origamid, a Brazilian learning platform.
This project was bootstrapped with Create React App.
Test Account:
- Login: dog
- Password: dog
The API used in the project, created by Origamid, deletes new posts and comments every 10 minutes, keeping only the original ones.
- HTML
- CSS Modules
- React
- React Router
- Victory
- Live Site URL: InstaDogs
✔️ Feed of photos
✔️ View post details: author, total views, dog's name, age, and weight, and comments
✔️ User authentication: login and auto login (using local storage)
✔️ Create a new account
✔️ Reset Password
✔️ Post a new photo
✔️ Post a new comment
✔️ Delete posts
✔️ Stats of your posts: total views and charts with the views of each post
✔️ User profile page
✔️ Infinite scroll
✔️ Loading animation
✔️ Image skeleton (placeholder for when an image is being loaded)
✔️ Responsiveness
-
Home: main feed with infinite scroll
-
Login
-
Modal: post details and comments
-
Photo page and user profile
-
Post a new photo and dog's details (a preview of the photo is displayed)
-
Account page and stats
-
Mobile
To clone and run this project you'll need Node.js and Git installed on your computer. In addition, it is good to have an editor to work with the code like VSCode. Follow the instructions bellow:
# Clone this repository
$ git clone https://github.com/julianachagas/instadogs.git
# Go into the repository
$ cd instadogs
# Install the dependencies
$ npm install
# Run the app in development mode
# Open http://localhost:3000 to view it in your browser
$ npm start
# Build the app for production to the `build` folder
# It correctly bundles React in production mode and optimizes the build for the best performance.
$ npm run build
-
Original project design by André Rafael
-
Deploying React apps to GitHub Pages: article from LogRocket
This project is under license from MIT. For more details, see the LICENSE file.
