강의

멘토링

커뮤니티

AI Technology

/

etc. (AI)

[PROKIT] Frontend Project Kit: Building a Timer App

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

5 learners are taking this course

Level Beginner

Course period Unlimited

  • nybs
프로젝트
프로젝트
학습법
학습법
AI 활용법
AI 활용법
React
React
프로젝트
프로젝트
학습법
학습법
AI 활용법
AI 활용법
React
React

What you will gain after the course

  • Indirect experience of implementing a real service project with quite high quality

  • Why Projects Are Essential for Learning Development

  • The mindset for growing into a frontend developer that the AI era demands

  • Mindset and Methodology for Successfully Starting a Project

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

Introducing PROKIT 🔥

When you try to start a frontend project for the first time, it's overwhelming to know where to begin.

Preparing ideas, organizing plans, design mockups, and even backend development corresponding to the client,

It's not easy to manage a project while considering multiple factors.

That's why we've prepared PROKIT 💻 .

We provide everything from business background, planning requirements, Figma designs, to API endpoints for project execution,

For those who want to experience projects indirectly while doing advanced frontend learning, please pay attention 👀


Project Introduction ⏰

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

We'll set virtual business goals and implement a product called DevTime to achieve those goals.

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'll be working on.

Login

Sign Up

Timer

Task Management

Dashboard

Ranking


In addition, profile settings, my page, etc. include various features that reflect essential frontend implementation tasks.

Deepen your various client implementation skills by directly building the DevTime application.


Project Structure Guide 🛠

We provide the necessary elements for proceeding with the frontend project.


Product Requirements Document (PRD)

I've compiled detailed requirements for DevTime's main features.

Use the provided product requirements document as a reference to implement your own timer application.

(* The PRD document is provided as a link accessible through Google Docs Viewer permissions. When the document is updated, the latest version will be continuously updated).

Example of provided PRD document


Figma Design Mockup

We provide UI mockups that need to be implemented on the frontend.

Create a visually polished project based on Figma designs with an applied design system.

(* The Figma design mockup is provided as a link with Viewer permissions so you can directly view the mockup. When materials are updated, the latest version will be continuously updated).

Figma Design Mockup

DevTime Design System


API Documentation (Swagger UI)

We've pre-defined and implemented the server with the necessary features for a web application to function properly.

Create a complete product by sending requests and receiving responses using the deployed API endpoint information.

(* The API documentation is provided as a Swagger UI link deployed as a web page for easy viewing. The content will be continuously updated with the latest version when materials are revised).

API Docs for DevTime Feature Implementation

We recommend this for 👍

ProKit helps you create pretty good project results and problem-solving experience, even if not perfect.

If you're currently in any of the following situations, we strongly encourage you to consider purchasing!

  • Job seekers preparing for employment in the frontend field


  • Learners who want to work on a project using what they've learned individually through online courses

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

  • People who want to create a high-quality portfolio with excellent resources


  • Frontend learners who want to successfully complete their first project


In particular, since this is a resource collection for project implementation, we recommend that only those who have completed basic learning of at least the following content 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 learning one or more client libraries/frameworks (React, Next, Vue, etc.)


  • Experience with version control using Git/Github


Additionally, you will need to learn the following content to proceed with the project. Even if you have completed the required prerequisites, please note that you may need additional learning while working on the project!

  • Understanding global state management and utilizing state management libraries

  • JWT token-based authentication/authorization logic implementation

  • Handling client-side image uploads using Presigned URLs

  • Understanding project environment setup, build, and bundling

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

  • Page routing logic implementation

Important Notice Before Purchase ⚠️

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

Since it does not presume an actual service, please be sure to refer to the following points in advance.

  • Prokit is a resource to help with projects, and does not provide lectures or training on the actual project execution process.

  • Prior knowledge is essential, and for any issues you encounter during the project, we encourage you to solve problems on your own using AI, Google, and learning communities (an open KakaoTalk room will be created).


  • PRD documents, Figma designs, API Docs, etc. are shared with Viewer link permissions to reflect continuous updates. Please pay special attention to the security of materials and avoid unauthorized sharing.

  • Commercial reuse of all provided materials is prohibited.

  • DevTime's server is a practice server shared by an unspecified number of people. Please be careful not to POST data containing personal information or sensitive content such as profanity/slander/sexual expressions/politics/religion.

  • DevTime's database is reset daily at 3 AM. Upon reset, only minimal practice Mock data that will be returned as responses to client requests is seeded, so please save and manage separately any data that requires cumulative management.

  • Detailed guidelines for using other materials are provided in the PDF documentation for sale. Please make sure to review them thoroughly before starting your project.


If you have any other questions about Prokit, please contact us 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?

  • Someone who is self-studying web development

  • Web frontend job seeker

  • Someone who wants to start their first project

  • Someone who is contemplating how to grow as a developer needed in the AI era

Need to know before starting?

  • Someone who has completed basic learning on using tools such as React

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

Hello
This is

804

Learners

23

Reviews

1

Answers

5.0

Rating

6

Courses

재밌게 성장할 수 있는 콘텐츠를 고민하고 제작합니다.

열정이 있는 누군가에게 해결해야 하는 좋은 문제(과제)를 제시한다면 성장할 수 있다고 믿고 있고,

어떻게 하면 학습에 더 도움이 되는 실무와 같은 문제와 미션을 제시할 수 있을지 주로 고민합니다.

 

Not Yet, But Soon

아직은 아닌 것 같지만, 곧 이루어 갈 모든 분들과 함께합니다.

 

nybs.contact@gmail.com

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!

$22.00

nybs's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!