Skip to content

Latest commit

 

History

History
165 lines (124 loc) · 6.27 KB

README.md

File metadata and controls

165 lines (124 loc) · 6.27 KB
Raw

Elements technical assignment - Frontend

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

Desktop - Home

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

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