A simplified Instagram clone built with React and modern web technologies.

To try out the application, use these credentials:

• Email: test@gmail.com
• Password: alimazloum

• index.html

  • Root HTML file
  • Contains empty title tag to prevent "Mini Instagram" text in browser tab
  • Contains root div for React application

• src/index.js

  • Entry point of the application
  • Sets up React and renders the main App component

• src/components/Navbar.js & Navbar.scss

  • Main navigation component
  • Desktop: Shows logo and right-aligned navigation items
  • Mobile: Fixed top header with app name and bottom navigation bar
  • Implements responsive design with different layouts for mobile/desktop
  • Contains Home, Profile, and Logout navigation items

• src/components/CreatePost.js

  • Post creation functionality
  • Form for uploading images
  • Caption input field
  • Submit post functionality

• src/pages/Login.js & Login.scss

  • Login page component
  • Responsive login form
  • Email and password input fields
  • Form validation
  • Centered layout with optimized mobile view

• src/pages/Profile.js & Profile.scss

  • User profile page
  • Displays profile information and picture
  • Shows user's posts in a grid layout
  • Responsive grid that adapts to screen size
  • Profile header with user details

• src/styles/*.scss
  • SCSS files for styling components
  • Uses modern CSS features
  • Implements responsive design
  • Rainbow gradient effects for branding
  • Mobile-first approach

1. Responsive Design

   • Mobile-first approach
   • Desktop: Traditional layout with top navigation
   • Mobile: Bottom navigation bar with fixed header
   • Adapts to all screen sizes

2. User Interface

   • Clean, modern design
   • Rainbow gradient branding
   • Smooth transitions
   • Intuitive navigation

3. Functionality

   • User authentication
   • Post creation and viewing
   • Profile management
   • Responsive image grid

1. Clone the repository
2. Install dependencies:

npm install

3. Start the development server:

npm run dev

• React
• SCSS for styling
• Vite as build tool
• Modern JavaScript features

• Works on all modern browsers
• Optimized for mobile devices
• Responsive on all screen sizes