Back to main page

P.P Freshpork

P.P Freshpork is a family business website development project aimed at enhancing product accessibility and building trust between customers and the company

Created at:

October 7, 2024

Stack:

  • - Nextjs
  • - Typescript
  • - Tailwindcss
  • - Shadcn
  • - Figma
  • - Git
  • - Vscode

Live Demo:

View Site
Project hero image

About Project

Propose

To develop a professional website for P.P Freshpork, a family-owned fresh pork business, to enhance digital presence and customer engagement.

Objectives

  1. Create a user-friendly online platform for customers to access product information
  2. Establish a strong digital presence to increase brand credibility
  3. Improve customer service through digital channels
  4. Expand market reach

Key Fetures

  1. Product catalog with detailed information
  2. Contact information and business hours
  3. About us section highlighting company history and values
  4. Mobile-responsive design

Expected Benefits

  1. Increased customer base
  2. Improved brand visibility
  3. Enhanced customer trust and loyalty
  4. More efficient business operations
  5. Competitive advantage in the digital marketplace
Project Purpose image
Project stack background

Web Stack Overview

P.P Freshpork's website is built using a modern frontend technology stack. The foundation is TypeScript, a powerful programming language that extends JavaScript by adding static type definitions, helping us catch errors early in development and making the code more maintainable and reliable.

The website is developed using Next.js, a React framework that provides essential features like server-side rendering, static site generation, and optimized routing. This ensures fast page loads, excellent SEO performance, and a smooth user experience.

For styling and UI components, I combine TailwindCSS with Shadcn UI. TailwindCSS provides utility-first CSS classes that make it easy to create responsive and customized designs, while Shadcn UI offers a collection of beautifully designed, accessible, and customizable components. This combination allows us to build a professional and consistent user interface efficiently while maintaining high standards of accessibility and user experience.

Projects Screenshots

Project screenshot
Project screenshot
Project screenshot
Project screenshot
Project screenshot

Challenges and Problem Solving

No guidelines for website layout design

Solved: This project was designed by me from scratch as a website about product information and manufacturing plants. I studied various websites to determine what sections should be included on each page.

Finding methods to filter products

Solved: This company has various types of products which posed a problem of how to categorize them. Eventually, I chose to categorize them based on production methods and packaging.

Poor responsive display of products

Solved: On the product display page, I chose to use Grid for layout to make it easier to implement responsiveness.

Performance issues on product pages with many images to load

Solved: Modified each image to load lazily so they only load when visible to the user.

Project Purpose image
Project Purpose image

Lessons Learned

1. Business Understanding

  • - Learned to identify and analyze business problems and requirements
  • - Understood the importance of client communication and expectation management
  • - Gained insights into how traditional businesses transition to digital presence

2. Project Planning & Design

  • - Developed skills in UX/UI design focused on business needs
  • - Learned to structure information architecture for optimal user experience
  • - Practiced creating user flows and wireframes that align with business goals

3. Technical Development

  • - Enhanced proficiency in modern web technologies (Next.js, TypeScript)
  • - Improved understanding of data structure design and implementation
  • - Gained experience in responsive design and mobile-first development

4. Problem-Solving

  • - Developed ability to translate business requirements into technical solutions
  • - Learned to balance aesthetic design with functional requirements
  • - Improved decision-making skills in choosing appropriate technologies

5. Professional Growth

  • - Enhanced project management and time estimation skills
  • - Gained confidence in handling end-to-end project development

Future Developement Plans

  • - Add an Admin system to be able to add or remove desired products
  • - Move all product data to an actual Database (currently pulling data from json files)
  • - Upgrade to an E-commerce system
  • - Add a popular product recommendation system
Back to main page