使用MongoDB、Express、React和Socket.io创建的instagram克隆
使用MongoDB、Express、React和Socket.io创建的instagram克隆
React 其它杂项
共177Star
详细介绍
Instaclone
An instagram clone created with MongoDB, Express, React, and Socket.io
Tech
- Frontend:
React
- State management:
Redux
- Routing:
React Router
- Form management:
Formik
- Animations:
React Spring
- Websocket management:
Socket.io
- Backend:
Express
- Database:
MongoDB
- Image hosting:
Cloudinary
Installation
Clone
- Clone this repo to your local machine using
https://github.com/Sandermoen/instaclone
Setup
Install npm dependencies using npm install
$ npm install
Set up a MongoDB database either locally or provision a free database with
MongoDB Atlas
Create a free
Cloudinary account
Create a
GitHub OAuth app
Create a .env file in the root directory
Set up required environment variables
MONGO_URI= // mongodb://localhost:27017/instaclone
JWT_SECRET= // random string: j2390jf09kjsalkj4r93
CLOUDINARY_API_KEY= // Cloudinary API key
CLOUDINARY_API_SECRET= // Cloudinary API secret
CLOUDINARY_CLOUD_NAME= // Cloudinary cloud name
SMTP_HOST= // mail.example.com
SMTP_PORT= // 587
EMAIL_USERNAME= // example@example.com
EMAIL_PASSWORD= // Password
HOME_URL= // http://localhost:3000
GITHUB_CLIENT_ID= // Client id for GitHub OAuth app
GITHUB_CLIENT_SECRET= // Client secret for GitHub OAuth app
In the root directory run both the backend and the front end with the following command
$ npm run dev
The app should launch automatically, enjoy playing around
Screenshots
Support
Reach out to me at one of the following places!
- Email at
smoensander@gmail.com
- More socials coming soon