Quick Layout

A layout builder for developers with deadlines.

• Visit deployed website

What is this project?

It's a site that enables developers to build layouts by simply dragging and dropping items in a way that represents the layout they want for their site.

HTML and CSS code is generated from the layout the developers assembled, and then the developers can use that code as their starter template for any website they'd like to build.

Built with

• Software:
  • React
  • Create React App
  • TypeScript
  • Redux
  • Styled components
  • React Router
• Testing and debugging:
  • Firefox DevTools
  • Windows 10 Virtual Machine for Microsoft Edge and Microsoft Narrator (screen reader) testing.

Accessibility

• Keyboard navigation (ie, <Tab>, <Enter>, <Esc>) works predictably.
• Screen readers work predictably and don't get confused by menus or modals.

What did you learn from doing this project?

• Design and plan before I build. I was used to jumping in to writing code as soon as a cool project idea came up to me, and then I'd refactor a billion times afterwards due to changing my mind regarding functionality or web design.

  • However since for this project I had no idea how I could even start building it, I broke down the project's functionality into very small tasks that I could tackle separately, and created wireframes to visualize how these tasks would look like to an end user.
    • Only after I was 100% sure I liked the user interface's design and determined the project's scope, I began building the project. This turned out to be a much smoother approach to building sites for me (I have yet to change my mind on functionality or design, which is rare!).
  • In the future I will plan my projects before I build them.

• I probably won't use styled components again in the future. Comparing styled components with other approaches to CSS that I have tried in the past, I personally prefer utility-first CSS frameworks (like Tachyons) since they allow me to:

  • Build sites much faster
  • Keep the size of the CSS stylesheets small (especially with frameworks like Tailwind that tree-shake unused CSS).
  • Reuse styles. As much as I tried to reuse CSS with styled components (creating style variables like Paragraph, Button, and Heading), I find utility-first CSS frameworks to be much more reusable out of the box and without any extra hassle.

• I became more comfortable writing React class components and understand the lifecycle of React components better.

What would you do if you had more time?

• Refactor the codebase to use only function components and hooks, instead of a mix of function components and class components.

  • My reasoning for using class components was the following:
    • This is a portfolio project. Once I started working for a company, I thought that it would be highly likely that they'd have some legacy code written in class components, and that by using class components in one of my projects I would be demonstrating that I'm comfortable with class components (lifecycle methods like componentDidMount, the render function, etc). However, while having that knowledge is beneficial, function components and hooks are arguably much more readable and easier to reason about, so I want to refactor the codebase in the future to adhere to modern React code style.

• Add tests. To ensure the major refactoring mentioned previously does not break existing functionality, I want the codebase to have a high test coverage before I begin refactoring it.

• Add more explanatory comments.

License

This site is licensed under the Mozilla Public License 2.0.