Introduction • Getting started • Examples
As a new frontend developer at Adevinta Spain, you will be working with cutting edge technologies as React, Layers architecture, ES9, Webpack, SUI Components, SUI Tools and more... To have a first contact with the tech stack for your first week, you will be working on a side pet project that will work as a simulated scenario of what you will face in our real-life projects.
You should be assigned one buddy that will help you through the process of learning all our stack. Please, don't hesitate to ask her/him whatever you need. She/He will be pleased to help you whenever you need it.
Firstly, this is not a test. Keep calm, learn and enjoy the new things that are going to come. We don't expect that you learn all the core concepts at 100% so if you feel that you are not catching up on everything at the first read, try to read it again and/or ask your buddy for whatever you want.
Using the MovieDB API create a project where we can search movies, list them and be able to access to the movie's detail. Feel free to add other functionalities that you can think of.
We will base our project on the Adevinta Web Convergence Tools and Conventions that are basically the next ones
Normally ~10 days would be enough. Surely when you start in the company you will have to attend onboarding meetings and trainings, so you will have less time. Do not worry, and do your project with peace of mind.
You can work alone on the project, but you can also have pair programming sessions with your buddy, to clarify concepts that you want to reinforce.
- Node version 16
What is a web server project? For us, a web app is a project that will handle the routing, get route requests, server-side rendering and more...
First thing that we need to do is create our repository.
Following this convention, and assuming that this pet project is not owned by any marketplace, we will use the acronym of mv (movies will be your pet project marketplace). So, following this convention we are going to name our first repository under our profile as:
<role>-<marketplace acronym>--<type>-<name> in our case, for example frontend-mv--web-app
Then we are going to init our npm project:
npm init -yAdevinta Spain Frontend projects are monorepos. A monorepo is a repository with all frontend projects (folders) that web-app needs to run.
According to that, we split the learning process into four parts, in every one you'll find further instructions to continue the project:
1 - Web App code: src
2 - Theme package: theme
3 - Components packages folder: components
4 - Domain (business logic) package: domain
At the end of the learning process, you will have created a marketplace project with a folder structure similar to the one you will see in our frontend projects.
/
├── components/
│ └── movie/
│ │ └── card/
│ │ │ └── index.js
│ └── ...
├── domain/
│ └── package.json
├── src/
│ └── pages/
│ │ └── Home
│ │ └── index.js
│ │ └── index.scss
│ └── routes.js
│ └── app.js
│ └── contextFactory.js
│ └── index.html
│ └── index.scss
├── theme/
│ └── package.json
├── .gitignore
└── package.json
Look at the repositories of different projects already finished in case you need to get ideas or solve doubts. Don't be shy and share your project with next newcomers 😝!