narasimhacherry/instagram-clone

Instagram-Clone

Title

Instagram-clone

Objective

In this project i have build an Instagram-clone which is a social media platform trending now-a-days. This project allowed me to pratice the concepts and techniques learned from React Course and apply them in a concrete project.

This project made me demonstrate my skills by creating an app that will take use of the hooks concept that will fetch data, displaying that data and adding responsivenes to the website.

In this i have used chakra-ui.

Tech Stack

Frontend Framework: ReactJS with chakra-ui.
State Managemet: Hooks.
Routing: React Router.
Styling: CSS-in-JS.
Backend: Node.
Database: Google Firebase Authentication.

Completion Instructions

● Users should be able to navigate to Authentication, Home, Profile routes using links in Navbar ● The website should be responsive in mobile view, tablet view as well (Use Media Queries to achieve the responsive website)

● Auth Route ○ Loader should be displayed while fetching the data ○ The difference should be displayed between Sign Up and Login ○ Authentication with goggle account is linked

● Home Route ○ Loader should be displayed while fetching the data ○ Sidebar, postfeed, suggestion are displayed with logic ○ Logout functionality is added

● Search Functionality ○ Search by username is available ○ Loader should be displayed while fetching the data

● Create Functionality ○ Photos are added from device ○ Caption is added to the bottom of the post

● Profile Functioality ○ By clicking the page navigates to Profile page ○ Loader should be displayed while fetching the data

Guidelines to develop a project

● npm create vite@latest ● Choose React --> Javascript ● npm install --> to install node module ● npm run dev --> to view the result

Submission Instructions

● By using the help of git and push the code into Github ● Deploy the project in Vercel

Resources

Design files

● https://chakra-ui.com/docs/components/icon 
● https://chakra-templates.vercel.app/ 

APIs

List the APIs, providing any relevant endpoints, documentation links, or access keys, required for the Assignment if any

Third-party packages

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Demo

https://social-app-narasimha.vercel.app/auth