Git Product home page Git Product logo

frontend_internship_shubhambhatt's Introduction

Full Stack Developer Intern Assignment README

Assignment Overview

Task

As a Full Stack Developer Intern, my task is to develop a web application using React and Vite, based on the design provided in the Figma UI/UX Design file. The project involves frontend development using React and styling with Tailwind CSS. Additionally, backend functionalities may be required depending on the project specifications.

Points to Note

  1. Technology Stack: The project is built using Vite as the build tool and React for frontend development. Tailwind CSS is used for styling components.

  2. Responsiveness and Clean Code: Ensuring the application is responsive across different devices and maintaining clean, well-structured code following best practices and coding standards.

  3. Additional Features and Animations: Incorporating extra functionalities and animations can enhance the user experience and showcase additional skills.

Approach

  1. Vite Development: Utilizing Vite for frontend development to take advantage of its fast build times and efficient development experience.

  2. React Components: Building reusable and modular React components for the frontend UI.

  3. Tailwind CSS for Styling: Leveraging Tailwind CSS for rapid and responsive styling of UI components.

  4. Backend Integration (if required): Implementing backend functionalities using appropriate technologies based on project requirements.

  5. Responsive Design: Ensuring the application is accessible and user-friendly on various devices and screen sizes.

  6. Clean and Modular Code: Writing clean, modular code adhering to coding standards and maintaining code readability.

Figma Design Reference

The design for the web application can be found in the Figma UI/UX Design file: Figma Design: Full Stack Developer Intern Assignment

Setup and Development

Cloning the Repository

  1. Clone the project repository to your local machine using the following command:
git clone https://github.com/PranshuBasak/frontend_internship_shubhamBhatt.git
  1. Navigate to the project directory:
cd frontend_site

Installing Dependencies

  1. Install project dependencies using npm or yarn:
npm install

or

yarn install

Running the Development Server

  1. Start the development server:
npm run dev

or

yarn dev
  1. Access the application in your browser at http://localhost:5173.

Dependencies Used

The project utilizes the following dependencies:

  • @headlessui/react: React components library for building accessible UI components.
  • @heroicons/react: Icon components library for the user interface.
  • @tailwindcss/forms: Tailwind CSS plugin for form elements styling.
  • chart.js: Data visualization library for creating charts.
  • react: JavaScript library for building user interfaces.
  • react-chartjs-2: React wrapper for Chart.js for integrating charts in React applications.
  • react-dom: React library for rendering components.
  • react-icons: Library for including popular icons in React applications.

Preview and GitHub Repository

Closing Note

If you have any questions or need further clarification regarding the assignment requirements, please feel free to reach out. I'm excited about this opportunity and look forward to showcasing my skills through this project.

Thank you for considering my application.

Best regards, Pranshu Basak

frontend_internship_shubhambhatt's People

Contributors

pranshubasak avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.