Landing Page with React and TypeScript

Welcome to the GitHub repository of TRACTIAN's Landing Page! Here you can find information about the project's development, such as which technologies were used, how to install and run the project, usage and more.

This application was developed as a Front-end challenge for Tractian. The goal was to recreate their existing homepage using pure React, meaning, only the essencial libraries, in the span of 10 days.

I was able to create a fully responsive header and hamburger menu, as well as eight different sections:

• Home, or "Hero";
• Teaser (slider and panel);
• Products;
• Why Tractian;
• How It Works (panel);
• Testimonials (slider);
• Schedule a demo (form);

I also had total freedom in regards to the UI, and could take inspiration from Cobli's website. With the exception of the original images, all the other icons and illustrations were created by me using Figma and designstripe.

During the development I was able to:

• Develop a React.js app using TypeScript;
• Declare the Component props and state types using interfaces;
• Use the useRef and useState React Hooks to store and manipulate data;
• Use the useEffect React Hook to control the component's lifecycle;
• Import fonts from Google Fonts;
• Use CSS variables and media queries to apply responsive design;
• Understand how a SVG is different from a regular image file (say, a png);

---

Built With

List of major frameworks/libraries used to bootstrap this project:

• React.js
• TypeScript
• UUID

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/pedrotrasfereti/tractian-landing-page.git

2. Install NPM packages

   npm install

3. Start the app with Yarn

   yarn dev

4. Visit http://localhost:3000/ on your browser

(back to top)

Usage

You may use my code or design to build your own projects, just be original about it.

(back to top)

Contact

Pedro Trasfereti - LinkedIn - pedrotrasfereti@gmail.com

(back to top)

Acknowledgments

List of resources I find helpful and would like to give credit to:

• Img Shields - readme
• Vite - module bundler
• ESLint
• Prettier
• Google Fonts
• Figma
• designstripe
• SonarCloud

(back to top)