peterrobert / refactoring-workshop-frontend

Improve code base for a refactoring workshop

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Exercise - "How to learn a new codebase FAST" (Frontend)

🎯 Learning Goals

The primary goal of this exercise is for you to make a messy codebase more readable and bug-free.

Supporting learning goals are the following:

  • Understand the importance of (exploratory) refactoring for learning a new codebase
  • Learn the value of applying design principles in code implementation
  • Improve ability to refactor an existing codebase

❗️ How to use

  1. Fork this repository
  2. Install dependencies
$ yarn install
  1. Launch development server
$ yarn dev
  1. Start refactoring!

📋 Requirements

In order to refactor effectively, make sure to fulfill the following requirements.

  • Separate the concerns: data and presentation
  • Rename variables/functions/files/folders to be more semantic
  • Reorder folder structure to include /pages, /store, /hooks
  • Remove unused code (files & folders)

❗️IMPORTANT: Make sure the behavior and presentation remains the same!

⭐️ Tips for success

If you're stuck, here are some handy tips to help you on your way:

  • Google is your friend! Look up any best practices regarding this particular tech stack and try to implement them
  • When learning the codebase, play around a bit: remove some code, rewrite in a way that makes sense to you first or add comments that explain what's going on in a file.
  • Ask a peer for a second opinion. Perhaps they know something you don't!

About

Improve code base for a refactoring workshop


Languages

Language:JavaScript 79.6%Language:CSS 19.7%Language:HTML 0.7%