Eğitim / Kodlama 2 Mayıs 2024

Code a Full Stack Fiverr Clone

We just posted a course available now on the freeCodeCamp.org YouTube channel. This comprehensive tutorial will walk you through the process of building a Fiverr clone using a stack of cutting-edge technologies.

Vuk Rosić created this course. Vuk is a Software engineer, AI developer, and course creator.

In this course, you’ll learn how to leverage several web technologies:

  • NextJS: A powerful React framework that enables functionality such as server-side rendering and generating static websites.

  • React: A JavaScript library for building user interfaces, maintaining the app’s dynamic and responsive nature.

  • Convex: A back-end development tool that manages server logic and database interactions seamlessly.

  • Typescript: A superset of JavaScript that adds static types to the language, helping with maintaining larger codebases.

  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

  • ShadCN: A collection of beautifully designed, accessible, and customizable React components that you can use to build modern web applications.

The course is structured into multiple sections, each focusing on different aspects of building a comprehensive service marketplace:

  1. Demo and Introduction: Get a full preview of the final product and an overview of the course structure.

  2. Setup: Learn how to set up your development environment with Convex, Clerk, NextJS, and ShadCN.

  3. Front-end Development: From designing a ‘Create gig’ page to crafting an advanced navbar, learn to handle the user interface effectively using React and Tailwind CSS.

  4. Back-end Integration: Dive into backend functions with gig.ts, utilize useApiMutation.ts for API interactions, and manage user data.

  5. Database and Schema Design: Define the database schema and integrate it with the front end to store and manage categories, subcategories, and user information.

  6. Dynamic Content Management: Create and edit gig pages, add images, and manage content with a custom title editor and offers editor.

  7. Payments and Transactions: Implement Stripe to handle payments including price addition, payment links, and seller account connections.

  8. Interactive Features: Add a confirm popup modal, manage gig browsing, searching, and filtering on the homepage.

  9. User Interaction: Enhance the platform with a user profile page, reviews section, messaging system, and a page to manage gigs.

This video course not only teaches the technical skills needed to build a complex web application but also covers the practical implementation of these technologies in a real-world project. By the end of this course, you will have a solid understanding of full stack development and the confidence to apply these skills in your future projects.

Watch the full course on the freeCodeCamp.org YouTube channel (6-hour watch).

source

Spread the love <3

You may also like...

Nis
04
2024
0
Artık şebeke yoksa da SMS gönderilebiliyor! İşte Google Mesajlar’ın uydu özelliği

Artık şebeke yoksa da SMS gönderilebiliyor! İşte Google Mesajlar’ın uydu özelliği

Google Mesajlar’ın test ettiği yeni özellik sayesinde, şebeke veya Wi-Fi bağlantısı olmayan bölgelerde bile, Android kullanıcıları uydu bağlantısı aracılığıyla SMS...

Spread the love <3
May
14
2024
0

ASELSAN ve SSB’den 350 milyon dolarlık yeni anlaşma!

ASELSAN ve Savunma Sanayii Başkanlığı (SSB) arasında yeni bir anlaşma imzalandı. Bu ortaklık kapsamında, ASELSAN’dan kent güvenliği sistemleri alınacak. Protokolün...

Spread the love <3
Nis
19
2024
0
Full React Tutorial #21 - The React Router

Full React Tutorial #21 – The React Router

In this React tutorial we’ll talk about the React Router & see how to set it up so that we...

Spread the love <3
Nis
01
2024
0
iPhone’un bu kamera hilesini kimse bilmiyor!

iPhone’un bu kamera hilesini kimse bilmiyor!

Akıllı telefonlarda yıllardır kamera zamanlayıcısıyla fotoğraf çekmek mümkün. Ancak Apple’ın iPhone modellerine yerleştirdiği Sesle Denetim erişilebilirlik özelliği sayesinde artık yalnızca...

Spread the love <3
Whatsapp İletişim
Merhaba,
Size nasıl yardımcı olabilirim ?