inflearn logo

[PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer App

This is mission content for a development project. We provide a PRD planning document, Figma designs, and API endpoints so that you can practice by implementing a timer app called DevTime yourself. Make the knowledge you have learned completely your own by implementing a project at a level similar to an actual service 🚀

21 learners are taking this course

Level Beginner

Course period Unlimited

React
React
React
React

What you will gain after the course

  • Indirect experience in implementing a real-world service project with a high level of completion.

  • Why projects are essential for learning development

  • The mindset for growing into a frontend developer required by the AI era

  • Mindset and methodologies for a successful project launch

  • How to successfully carry out projects and acquire necessary knowledge using generative AI

Introducing PROKIT 🔥

When you try to start a development project for the first time, it feels overwhelming and you don't know where to begin.

From preparing ideas and organizing plans to design drafts and backend development that corresponds to the client,

It's not an easy task to carry out a project while considering various factors.

In particular, it is not an easy experience to practice stable development that meets requirements based on detailed planning.

That's why we prepared PROKIT 💻 .

We provide the business background, planning requirements, Figma designs, and even API endpoints for the project,

Attention all those who want to experience a project indirectly while engaging in advanced learning 👀


Project Introduction ⏰

💡 This is an [Advanced] project mission that includes challenges such as complex permission management and client-server state handling.

The project topic we have prepared is [DevTime: Implementing a Timer for Recording Development Study Time].

We will set a hypothetical business goal and implement a product called DevTime ourselves to achieve that goal.

Use the provided materials to focus on implementing frontend features and complete the DevTime application!

Below are examples of the main features of the project you will be working on.

Login

Sign up

Timer

To-do Management

Dashboard

Ranking


In addition, various features reflecting essential frontend implementation tasks, such as profile settings and My Page, are included.

Deepen your client-side implementation skills by building the DevTime application yourself.


Pro-Kit Configuration Guide 🛠

We provide the necessary elements to proceed with the frontend project.


Product Requirement Document (PRD)

We have organized the detailed requirements for the main features of DevTime.

Please refer to the contents of the provided Product Requirement Document (PRD) to implement your own timer application.

(* We provide a link to the PRD document with Google Docs Viewer access. The content will be continuously updated to the latest version whenever the materials are modified).

Example of the provided PRD document


Figma Design Drafts

We provide the UI mockups to be implemented in the frontend.

Create a visually high-quality project based on Figma designs that have a design system applied.

(* For the Figma design draft, we provide a link where you can check the draft directly with Viewer permissions. The content is continuously updated to the latest version whenever the materials are modified).

Figma design draft

DevTime Design System


API Documentation (Swagger UI)

We have implemented the server by pre-defining the functions necessary for a single web application to operate properly.

We provide the entire stable server code, so try running the server on your own PC and practice sending requests freely!

You can build a complete product by sending requests and receiving responses using the API endpoint information.

API Docs for DevTime Feature Implementation

Highly recommended for these people 👍

Prokit helps you create decent project results and problem-solving experiences, even if they aren't perfect.

If you are currently in any of the following situations, please strongly consider purchasing!

  • Job seekers preparing for employment in the front-end field


  • Learners who want to work on a project using what they have learned individually through online lectures

  • Those who want to create a more advanced project experience while attending a bootcamp

  • Those who want to create a high-quality portfolio using premium resources


  • Frontend learners who want to successfully carry out their very first project


In particular, as this is a resource kit for project development, I recommend that only those who have a basic understanding of at least the following topics consider purchasing.

  • Basic knowledge and application of HTML, CSS, and JavaScript languages

  • DOM manipulation and client-side event handling

  • Understanding of asynchronous processing (Promise, async/await, etc.)

  • API communication (using fetch API, axios library, etc.)

  • Experience in learning one or more client libraries/frameworks (React, Next, Vue, etc.)


  • Experience with version control using Git/GitHub


Additionally, for the project to proceed, learning the following content is required. Even if you have completed the mandatory prerequisite learning, please note that these are topics that may require further study while working on the project!

  • Understanding of global state management and utilization of state management libraries

  • Implementation of JWT token-based authentication/authorization logic

  • Handling client-side image uploads using Presigned URLs

  • Understanding of project environment setup, build, and bundling

  • Understanding and utilizing browser storage (local storage, cookies, etc.)

  • Handling page routing logic

Precautions before purchase ⚠️

Prokit is a collection of project materials prepared for learning purposes.

Since this is not intended for an actual live service, please be sure to refer to the following points in advance.

  • Prokit is a collection of materials designed to assist with your project; lectures or training on the actual project execution process are not provided.

  • Prior knowledge is essential, and if you encounter any obstacles during the project, we encourage you to solve problems yourself by utilizing AI, Google, and the learning community (an open KakaoTalk chat room will be established).


  • The PRD documents and Figma designs will be shared via Viewer links to reflect continuous updates. We kindly ask you to be extra cautious regarding the security of these materials and to refrain from unauthorized sharing.

  • For the server, we provide the complete backend code and a guide for setting up the server environment using Docker so that you can install and use it on your individual local PC.

  • Commercial reuse of all provided materials is prohibited.


  • Other detailed guides on how to use the materials are provided in the PDF document for sale. Please make sure to read and understand them thoroughly before starting the project.


If you have any other questions about Prokit, please leave an inquiry at nybs.contact@gmail.com.

Let's start the project 🏃🏻🏃‍♀️

Use Prokit to successfully create high-quality project results!

Welcome once again to the world of projects 🐵

Recommended for
these people

Who is this course right for?

  • Those who are studying web development on their own

  • Web frontend job seeker

  • Those who are looking to start their very first project.

  • Those who are contemplating how to grow into a developer needed in the AI era

Need to know before starting?

  • Those who have completed basic learning on using tools such as React

  • Those who are ready to carry out a basic project on their own

  • Those who are capable of carrying out service development projects through Vibe Coding.

Hello
This is nybs

924

Learners

59

Reviews

1

Answers

4.8

Rating

6

Courses

I design and create content that allows for growth in an engaging and enjoyable way.

I believe that if you present good problems (tasks) to someone with passion, they will be able to grow, and

I mainly focus on how to present practical problems and missions that are most effective for learning.

Not Yet, But Soon

We are with everyone who isn't there yet, but will be soon.

nybs.contact@gmail.com

More

Curriculum

All

6 lectures ∙ (2hr 20min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Similar courses

Explore other courses in the same field!

25% off for new members

$12.00

25%

$22.00