Instagram Task
This project is a simple Instagram clone built using React and Vite for the frontend, and Node.js with Express for the backend. It includes user authentication, Instagram OAuth, and basic post fetching functionality.
Frontend
Features
- React with Vite for fast development
- Tailwind CSS for styling
- React Router for navigation
- Axios for API requests
- SweetAlert2 for alerts
- React Icons for icons
- React Loader Spinner for loading indicators
Setup Instructions
- Clone the repository:
git clone <repository-url> cd Frontend/instagram-task ```
- Install dependencies:
- Run the development server:
- Build for production:
- Preview the production build:
Backend
Features
- Express.js for server-side logic
- PostgreSQL for database
- Passport.js for Instagram OAuth
- JWT for authentication
- Bcrypt for password hashing
Setup Instructions
-
Navigate to the backend directory:
-
Install dependencies:
-
Set up the database:
- Ensure PostgreSQL is installed and running.
- Create a database and update the
.envfile with your database credentials. - Run the SQL schema to set up the tables:
psql -U <username> -d <database> -f Schema.sql ```
-
Configure environment variables:
- Create a
.envfile in theBackenddirectory with the following variables:DB_USER=<your_db_user> DB_HOST=<your_db_host> DB_NAME=<your_db_name> DB_PASS=<your_db_password> DB_PORT=<your_db_port> SECRET_TOKEN=<your_jwt_secret> INSTAGRAM_CLIENT_ID=<your_instagram_client_id> INSTAGRAM_CLIENT_SECRET=<your_instagram_client_secret> INSTAGRAM_REDIRECT_URI=<your_instagram_redirect_uri> ```
- Create a
-
Run the server:
-
Deploying to Vercel:
- Ensure the
vercel.jsonfile is correctly configured. - Deploy using Vercel CLI or through the Vercel dashboard.
- Ensure the
Additional Information
- The frontend and backend are set up to work together. Ensure both are running for full functionality.
- The backend uses Instagram OAuth for authentication. Make sure to set up your Instagram app and obtain the necessary credentials.