Freelance React Developer’s Checklist [Infographics and Free Email Template]

react checklist cropped Freelance

Freelance React Developer’s Checklist [Infographics and Free Email Template]

Whether you are a freelance React developer or you do another kind of freelance work on short term projects, you can recognize similar patterns in your workflow. I found similar patterns in process of building React.js projects. In almost every project, I need to ask for clarification or similar questions in regards to graphic design.

This checklist is not only for freelance React developers, but it can be helpful for others who work closely with developers, such as project managers or graphic designers. I use this checklist before starting building the project and after agreement with client.

I have been working remotely for clients worldwide as a freelance React developer. I mainly cooperate with other developers, graphic designers and project managers. Many times, I need to cooperate with people in other timezones. It means, the communication with other participants is crucial and needs to be effective. This checklist can be applicable to building web interfaces in other technologies too, but I have mostly experience with React.js projects.

Have you ever came across a freelance job like this?

We are currently looking for a freelance React developer to assist us with an ongoing project. We have mockups of widgets, which we want to add into our React.js project. We’re quite pressed for time at the moment, and we’re hoping to have the build completed by the end of next week…

Many times freelance developers are hired, because the project is urgent and it doesn’t meet estimated deadline. In this case, effectiveness is one of the most important attributes.

This checklist consists of questions, which needs to be clarified during the development. You can ask these questions as you build the project, but why don’t ask them ahead? You can develop and deliver React projects faster. In this checklist, I will start with the most important points and at the end of this blog post, you can get my email template, which I send as a follow-up message.

1. Supported browsers and devices

supported browsers and devices

You will come across clients who know what browsers and devices should be supported, but some clients have no idea. If you didn’t get this information, try to find out if client knows their users from Google Analytics. If you work on a new project, you can suggest the most popular browsers and their versions from global statistics. You should also ask if there is anybody who can do some acceptance testing. If there are no testers who can qa the project, graphic designers or project managers can check if everything works well. If they are too busy, you should put more effort into testing across browsers and devices.

2. Sharing designs

design development workflow

Surprisingly, a lot of digital agencies don’t know tools for collaboration among designers and developers. The most effective way to implement web user interface based on graphic designs is using a tool, which provides features for sharing, inspecting and communicating designs. You can find several tools, which are able to do this. You can use Zeplin, Avocode or InvisionApp. Unfortunately, Avocode doesn’t allow creating project for free, but Zeplin and InvisionApp do.

Designers can export graphic designs into Zeplin using a plugin for graphics editors. Myself, as a freelance React developer, I don’t have a license for graphics editors. I always ask graphic designers to export designs into Zeplin through a plugin.

3. Getting package.json file

npm logo

This applies if your project is part of another project, which you don’t have access to. You shouldn’t add new libraries, if there are already libraries for solving the same problem. You should use the same React.js version and the same libraries with the same versions to avoid incompatibility issues.

4. Sharing image assets and icons (use a cloud storage)

sharing images

If you use Zeplin or similar tool for sharing designs, you can export image assets and icons. In my experience, this feature doesn’t work well and exported images are not accurate or they are corrupted. Ask designer for all image assets and icons.

Ideally, they share image assets through a cloud storage service, e.g. Google Drive or Dropbox. I remember a project where designer changed several images more than ten times and always sent it to me through slack messages. It was hard to find some images and their latest version in a heavy slack communication.

5. Getting fonts

font from graphic design

As a freelance developer, you probably think you can add fonts as the last thing. It is a very easy update, which doesn’t take you more than two minutes. This is true, but the point of view of non-technical people is different. Clients and decision makers feel like the project is unfinished, if web interface is missing fonts from graphic designs.

When you share you progress, at least 90% of clients always ask you to add the font from graphic design. Even if your work is part of a big project you don’t have access to and font is there, they always ask you to add the font. You can ask graphic designer for fonts ahead and skip asking for this requirement during the development.

6. Getting responsive breakpoint values

responsive design breakpoint values

You need to know responsive breakpoint values, if web interface is designed for different types of devices. You can see dimensions in Zeplin or graphics designs, but they don’t need to match responsive breakpoint values. Double check this with graphic designer.

7. Getting designs of different states of components

form input states

In almost every web application you can find UI elements such as links and form elements. Many times, they have different graphic designs for different user actions. A graphics designer should provide you designs of different states of components. If you don’t get them, you can do following steps:

  • Identify focusable elements in graphic design. Ask graphic designer if you should keep default browser focus style, or you should implement a custom style. You can ask if this style should be applied to all focusable elements or for example buttons should have different focus style than links.
  • Find all links and buttons and ask if there is different design for hover and click actions. If buttons are inside forms, check if they can have disabled or even a loading state. Ask designer, if you should implement them.
  • Find other form elements and find out if they can have disabled and error states. If form elements can have one of these states, ask their design.

8. Getting external urls

Take a look at graphic designs, if you can find any external links. If there are some, ask what is their url. You or someone else can add comments in Zeplin, where urls can be added.

9. Loading and 404 page

404 error

If you can’t find 404 page, ask the client if you should implement one. If you do any data fetching, user can get a delay between requesting and getting data. Ask if there should be a loading page or loading component.

10. Recognizing array data structures

array data structures in design

Try to identify arrays in graphic designs. You can find array data structures, if you see a sequence of repetitive elements. One of the most common use cases is a list. If you have access to API, you can see array data structures immediately, but many times API is not available or ready. In this case, you need to figure out, if number of elements in array is fixed or it can be variable.

If array has fixed length, you just implement it based on design. If number of elements can be variable, you need to know this. Based on the number of elements and element’s dimensions, there can be a scrollbar or you can consider other techniques such as react-virtualized library, infinite scrolling or paging. You need to know how API will be designed for this endpoint.

11. Identifying fixed elements

fixed navigation

Check all banners and navigations and ask if their position should be fixed or not.

Email Template

I send this follow-up message after agreement with client. It’s a good idea to mention the most important points on initial call, but you should talk about that at the end of call. In the beginning, you should focus on the main purpose of the project.

Infographics

Feel free to download this infographics and use it before start working on a new freelance React.js project.

freelance react developer checklist infographics

Conclusion

From the beginning, you should address client all necessary points to be able to deliver the desired outcome as soon as possible. This is important in short-term freelance React projects and remote collaboration.

In most projects you probably cannot avoid further communication with clients or other people, but you need to communicate effectively from the beginning. Hope this checklist helps not only freelance React developers, but graphic designers and project managers can benefit from this resource too.

NEED A REACT.JS DEVELOPER? LET’S BUILD SOMETHING.

GET IN TOUCH

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: