Elements technical assignment - Frontend

This is a Next.js project bootstrapped with create-next-app.

Pre-requisites 📋

This project has been built with:

• yarn [1.22.4]
• node [12.19.0]
• Typescript [^4.1.3]
• React [17.0.1]
• Next [10.0.5]

Installation 🛠️

First, project dependencies installation:

npm install
# or
yarn install

As .env variables are used within this project, you need to set them up.

cp .env.sample .env.local

This being done, there are only two remaing steps to have our application running 🚀:

[ Tab 1 ]

Init a cors-anywhere instance.

npm run server
# or
yarn run server

[ Tab 2 ]

Start Next.js in development mode.

npm run dev
# or
yarn run dev

You should now see something like this:

yarn run v1.22.4
$ next dev

Loaded env from {yourPath}/elements-technical-test/.env.local
ready - started server on http://localhost:3000
event - compiled successfully

Open http://localhost:3000 with your browser to see the result.

Design 🎨

As I always try to bring my own value or touch to every project I work on, I decided to create my own Elements themed design.

⚠️ Please note ⚠️:

As this is not a real-life project, the design has established a serie of guidelines such as layout, colors and elements. During development phase, a few things have changed, so take it as a sandbox where I've projected my ideas while they were popping up.

Built with Figma

Design

Documentation 📖

Project architecture 🧰

Project field	Tech / library used
Styling	scss
Main language	Typescript
Formatting	ESLint - Prettier
Pre-commit hooks	Husky - Lint-staged
External libraries	Swiper - AOS - cors-anywhere

Now more in depth:

Folder	Motive
/components	React components
/scss	styling modules
/global	Global tooling used accross this app
/global/constants	Immutable constants
/global/utils	Reusable functions
/global/models	Typescript interfaces and types
/global/context	Context provider, reducer and actions
/pages	Next.js pages directory. Includes dynamic routing
/pages/location/[name]	Dynamic routing for different locations
/server	Server file that runs cors-anywhere

User stories 👤

Completed / uncompleted user stories or requirements:

• 1. As a Reviewer, I want a web application that can show the weather data that is supplied by my server.
• 2. As a User, I want to see a home screen with all the cities that are available on the API.
• 3. As a User, I want the cities to be sorted alphabetically.
• 4. As a User, I want to be able to refresh the data that is on the home screen.
• 5. As a User, I want to be able to click on a city and see the weather results on a separate detail screen. The detail screen should be reachable by a direct URL.
• 6. As a User, I want all the temperatures to be displayed in Celsius.
• 7. As a User, I want the temperatures to be displayed in chronological order.
• 8. As a User, I want to have the ability to hide/unhide a city and remember my choice after a page reload.
• 9. As a Reviewer, I want a subject in the README.md explaining how to run the application.
• 10. As a Reviewer, I want a subject in the README.md explaining the chosen architecture.
• 11. As a Reviewer, I want the application delivered in a private GitHub repo, please invite elements-interviews. The GitHub repo may not be published to a public location.
• 12. As a Reviewer, I want a report of User Stories that couldn't be finished or have a comment. Please add it to the README.md of your project.
• 13. As a Reviewer, I value the usage of the React or Vue framework. If there is a reason for using another framework, please specify it in the README.md.
• 14. As a Reviewer, I value the usage of TypeScript over JavaScript. If there is a reason for writing JavaScript, please specify it in the README. md.

Features

• Unit testing: after trying many different set-ups using [Jest - Typescript - Nextjs - ESLint], I didn't make it. Resources used:

• GitHub - Prottoy2938/nextjs-typescript-eslint-jest-template: Starter Template for Nextjs, TypeScript, ESLint and Jest

• Testing with typescript + jest + ts-jest · Issue #8663 · vercel/next.js · GitHub

• Jest Typescript: Unit Testing with Typescript and Jest - DEV Community

• https://medium.com/@benjaminwfox/next-js-setup-config-for-testing-linting-and-absolute-imports-605959d7bd6f

• next.js/examples/with-jest at canary · vercel/next.js · GitHub

• Error handling (API error | connection issue). Due to a lack of time, I haven't gone through this user story. Feel free to check this project that covers this functionality: spotify-react-app

Time spent ⏱️

Development phase	Hours
Styling	5h
Design	6h
Set-up	2h
Development	20h / 25h
Documentation	2h

Personal comment

As this assessment allows to use as much time as desired, I've tried to build a well-structured application with a fresh design, in order to show the creativeness that I try to achieve as a professional.

Things I am more proud of

• Usage of utils as the core of the project: this folder contains the most complex part of the project.
• Usage of Map and Set JS objects.
• Clip-path on background image.
• More structured design
• Theme switcher
• Redux-way app state management

Author

Miguel Hernanz

License

MIT