WEB DEV PROJECT

Cocktail Corner

- A cocktail browsing application.

laptop and mobile image of project

My Role

Software Engineer

Start Date

30/4/2024

End date

2/5/2024

Technologies Used

Tech Stack

image of tech stack used
image of tech stack used
image of tech stack used
image of tech stack used
image of tech stack used
image of tech stack used
image of tech stack used
image of tech stack used
image of tech stack used

The Cocktail Corner, a cocktail browsing application that was developed using NextJS. The app boasts a homepage that showcases featured drinks with a list of possible filters and I dynamic drink details page.

I used pre built, highly-customisable components from ShadCN, as well as the Framer Motion library for implementing smooth animations throughout the application for a pleasant user experience.

Users will be gracefully redirected back to the homepage if a page is not found or drink details are unable to be found.

Problem

Problem Statement

One of the main problems that people face when looking to discover new cocktails is the lack of a comprehensive and user-friendly platform to browse and explore a variety of drink recipes.

image underlying text in problem statement
HIGH-FIDELITY FIGMA DESIGN
image of figma design

Way of Work

My Process

symbol of working process

Definition

symbol of working process

Design

symbol of working process

Planning

symbol of working process

Development

symbol of working process

Deployment

Problem

Challenges & Learnings

CHALLENGES

challenge symbol

Creating dynamic and efficient fetch logic to handle multiple possible filters.

challenge symbol

Focussing on attention to detail and user experience.

challenge symbol

Simulating database query behaviour with creating use of thecocktaildb.com api

LEARNINGS

challenge symbol

Created dynamic and highly reusable fetching logic by utilising NextJS server actions and React custom hooks.

challenge symbol

Effective time management and focus in creating and deploying the project quickly and efficiently.

challenge symbol

Set up all the metadata including preview image, title and description as well as favicon

challenge symbol

Acquired deeper understanding in using the ShadCN component library.

Projects

Other Case Studies

Image of similar case study

Swift Monkey

A beautiful landing page for a the tech company Swift Monkey making use of custom animations and a professional Figma design.

Image of similar case study

Portfolio

A personal portfolio developed using NextJS. This stylish portfolio boasts a light and dark mode as well as a sleek responsive design. The portfolio w...

Have a project in mind that requires technical expertise?