What if LinkedIn was beautiful?

• Next.js

  2,039 120,313 10.0 JavaScript

  The React Framework

  

In fact, this is still an open issue at Next (by the time this post was written). Currently, there are some workarounds available to solve the problem, but they have their downsides as well. Fortunately, the problem drew a lot of attention at GitHub community, and hopefully, it will soon be fixed.

• linkedin-redesign-app

  1 18 0.0 JavaScript

  An attractive and interactable user interface created with React.js.

First things first, here is the LIVE project and also the GitHub project.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• json-graphql-server

  1 1,909 4.9 JavaScript

  Get a full fake GraphQL API with zero coding in less than 30 seconds.

  

Before jumping into the interface, the first task in my To-Do list was to create an API able to serve the data in the structure that I would need them. I didn't need to create it from scratch using a real database since it wouldn't be necessary to insert/update or delete any data — I just needed an API returning all the data that I would use. To achieve that, I used the awesome package json-graphql-server which does an amazing job creating a GraphQL API with static data that can be stored in a simple JSON file on the server — I just realize that the package name does a pretty good job describing it.

• GreenSock-JS

  95 18,590 4.7 JavaScript

  GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

  

No need to say that GreenSock is one of the most complete animation javascript library we have available today. The framework was used as the main source of animations that come directly from user interactions, like tabs, popups, drop-downs, etc.

• framer/motion

  43 21,984 9.8 TypeScript

  Open source, production-ready animation and gesture library for React

  

There is also a second topic here. I wouldn't say it was a "problem" but more like a point of attention with the Framer Motion API integration. As some of the routes are dynamic generated based on data from the server, it is important to handle them with React Memo, where it can prevent components from unnecessary multiple renders. Otherwise, as soon as the router change was triggered — but before the animation — the current page would be re-render, not giving enough time for it to fade-out of the screen (again). These re-renders have a serious impact on the app's final performance, not only affecting the client-side of the application but also increasing the requests to the server leading to possible overloading problems. I would say that the memoization system when used wisely is an awesome optimization technique with a huge performance impact and deserves special attention while developing an application.

• redux

  268 60,449 9.0 TypeScript

  A JS library for predictable global state management

  

Working with individuals stand-alone display components fit most cases, but there are some scenarios that it's not enough to achieve a goal. The Chat component — which is composed of a master component and three sub-components — is a perfect example of that. The challenge here is not only the interface by itself — with a decent mobile version — but also to make the sub-components communicate with each other in harmony. At first, I thought of using Redux.js for that, but even though it would fulfill the requirements and solve our problem, I've chosen to work with React Context API instead, that is meant to share data that can be considered “global” for a tree of React components, fitting perfectly to the Chat component case. This wasn't the only place where Context API was required, but as mentioned, this is a "quick overview", so we are going to stick only with the Chat component.

• React

  1,690 221,535 9.8 JavaScript

  The library for web and native user interfaces.

  

As the goal here wasn't to design an UI, but to develop it using React.js, searching around I found an amazing redesign concept by Gregoire Vella that was pretty close to what I had in mind. Inspired by his work I coded the interface proposed. Here is a quick video of the final result:

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project