AVendingMachine is a modern web application designed for a company to showcase a catalog of vending machines. Users can browse products and view detailed information through an intuitive interface. Additionally, the site provides a way for customers to contact the company in case of any inquiries.
- Product Catalog: Browse a wide range of products with detailed descriptions and images.
- Responsive Design: Optimized for both desktop and mobile devices.
- Interactive UI: Smooth animations and transitions using Framer Motion.
- Real-time Data: Integration with Firebase for real-time updates.
| Category | Technology | Description |
|---|---|---|
| Frontend & Framework |
|
A JavaScript library for building user interfaces. |
|
A strongly typed programming language that builds on JavaScript. | |
|
A fast build tool and development server. | |
| Design |
|
A utility-first CSS framework for rapid UI development. |
|
A set of accessible and customizable UI components. | |
| Backend |
|
A platform for building web and mobile applications with real-time data. |
- Frontend Development: Building responsive and interactive user interfaces with React and TypeScript.
- State Management: Using Redux Toolkit for managing application state.
- API Integration: Fetching and displaying data from external APIs using Axios.
- Form Handling: Implementing form validation and submission with React Hook Form.
- CSS-in-JS: Styling components using Tailwind CSS and class variance authority.
- Build Tools: Configuring and optimizing the development environment with Vite.
- Version Control: Managing code changes and collaboration using Git and GitHub.
To run the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/kislevlevy/a-vending-machine
- Navigate to the project directory:
cd a-vending-machine - Install the dependencies:
npm install
- Start the development server:
npm run dev
To view the production site, visit: AVendingMachine