Fully responsive Lobe.ai informational website clone MVP. Live demo here.

📦src => Main source code container
 ┣ 📂assets => Media elements that are used in the page.
 ┣ 📂components => Components that are used in multiple pages or layouts.
 ┣ 📂configs => Configuration for the different components of the application.
 ┣ 📂hooks =>Custom React Hooks to handle different functionalities or effects.
 ┣ 📂layouts => Main layout components that give the general structure to the web site UI.
 ┃ ┣ 📂header
 ┃ ┣ 📂footer
 ┃ ┣ 📂skeleton
 ┣ 📂pages => Components that generate the pages of the web site.
 ┣ 📂tests => Files for testing.
 ┣ 📂utilities => Functions that are common across the project.

• Lazy Loading for Images and Components with Lazy, Suspense and the react-lazy-load-image-component library.
• Font import optimization with .... font-display (swap) https://web.dev/optimize-webfont-loading/
• CDN ready for the files.. (I have to get the URL for the files in a function or component)
• Intersection Observer for the video playback.
• Video preload="metadata" to download some metadata before the full video is downloaded. With this the application will have some information ahead of time

• Lobe.ai clone
  • Clean Architecture
  • Optimization Techniques used:
  • Table of Contents
  • General Information
  • Technologies and Techniques used
    • Planning and Design:
    • Front-end:
    • Testing:
  • Features
  • Screenshots
  • Setup
  • Project Status

• This is a frontend project developed Rect with Typescript and Vite. The objectives are (1) be a playground for techniques that improve the performance of pages that use a large number of video and image elements and (2) be a placeholder for general React TS components I am using in real projects.

• The duration of the project was 2.5 weeks.
• The planning was done with the User Story Mapping technique, you can fin the different Story Maps created in the corresponding Features section below.
• The UI was ispired by the real lobe.ai website
• The Wireframes implemented and to be on this project were build in Figma and can be found here. The Final UI was implemented using the official LinkedIn documentation about Colors and Typography.
• The Entity Relationship Diagram (ERD) can be found here.
• The internal project architecture was implemented following the concepts of the CLEAN Architecture.
• Overal code documentation was done leveraging JSDocs.
• GitHub Actions was used to deploy the web.

• ReactJS with a customized CRA template.
• Routing with react-router v6.
• Internal application state managed with Redux.
• CSS design with Tailwind CSS.
• Code Splitting was implemented to reduce loading wating times. This was achieved using Dynamic Import API and React Lazy loading components.
• The web app is 100% responsive.

• Unit testing was done.
• Test coverage is 45% and is increasing using Jest and react-testing-library is being used.
• While testing, the project was run using the Chrome's Development Tools "Fast 3G" and "No Caching" options. So the app is ready for slow internet connections.
• Lighhouse was executed several times, the last result objtained was 92% overal:

By clicking on the Feature name you will be redirected to the corresponsing User Story Map development in order to plan the Work to be done on each Feature.

• Sign-up with Google ✔
• Sign-in with Google and Anonymously ✔
• News Feed navigation ✔
• Add a Post ✔
• Sign-up with User and Password 🔜
• React/Comment to a post 🔜
• Create Profile 🔜
• Edit Profile 🔜
• Follow and Add new Connections 🔜
• View My Profile summary/statistics information 🔜

Landing Page	Landing Page responsive	News Feed

Clone this project by doing:

$ git clone https://github.com/pieroguerrero/linkedin.git

Then go to the folder you cloned the code and execute:

$ npm install

WARNING: If you are going to use other libraries to achieve other purposes be carefull and remove the caret (^) prefix that the dependency versions have.

Project is: in progress I am constantly adding some code in order to test new techologies or concepts.