• 

  Storyblok deployment with vercel interface

• 

  storyblok bloks interface

• 

  storyblok slug folder and the slug UI

• 

  Visual editor home page

• 

  About page

• 

  Home page happy customer section

• 

  FAQ page

• 

  Service page

• 

  About page leadership team section

• 

  Layout (navbar, chatbot and footer) interface

Handypro: Bridging the Gap Between Service Providers and Customers.

Inspiration

In today's fast-paced world, finding reliable service professionals can be a daunting task. Whether it's a leaking pipe at midnight or needing a trusted electrician, people often struggle to find vetted professionals quickly. Handypro was produce from this very challenge to create a seamless platform that connects users with trusted local service providers in real-time.

What I Learned

Throughout this project, I gained valuable insights into:

• Building scalable website with Next.js and TypeScript with storyblok
• Implementing responsive UI/UX designs with Tailwind CSS
• Creating multi-language support for better accessibility

How I Built It

Handypro is built using a modern tech stack:

• Frontend: Next.js 13+ with TypeScript, React and storyblok,
• Styling: Tailwind CSS for responsive design
• Internationalization: storyblok field level translation
• Component Library: Custom UI components built with Radix UI primitives (Shadcn component)

The architecture follows atomic design principles, with reusable components organized into atoms, molecules, and organisms for maintainability, scalability and modularity.

Challenges I Faced

1. Multi-language Support: Adding internationalization while maintaining performance was challenging but rewarding.

2. **Configuring preview and production mode through storyblok and the hosting platform (vercel)

3. Responsive Design: Ensuring a seamless experience across all device sizes

4. Performance Optimization: I implemented code-splitting, made use of modularity and utilize server side rendering.

This hackathon has been an incredible learning experience, and I am excited to continue improving Handypro to better serve both customers and service providers.

Built With

• next
• react
• storyblok
• typescript