
# I made a fullstack application using Next.js and MongoDB for a frontend assessment

This application was part of an assessement I took for a Frontend developer position for a brazilian company and was developed in 36 hours under a 5 days deadline. It was a good opportunity to show some of the skills I have learned so far, and to have a feedback from another perspective, which helped me to improve them even further. The company was happy with my approach and offered me a role as Junior Fullstack Developer.

Live demo: [https://hairplace.vercel.app/](https://hairplace.vercel.app/)

## The case

The scenario given was: You work on the development team of a software house and have been assigned to a scheduling system project for a hairdressers' network. Your role is to develop:

- A login page

- A user page. For this one, include the information with the types of information that you, as a customer, would like to see. Don't forget to include buttons call to action that direct the user to schedule a new visit to the hairdresser.

- One or more agenda pages with a calendar that will be used by employees to schedule in different units of the network and validate data
  from clients.

- All pages must be responsive

- The pages do not need to be integrated with any system and do not need to actually schedule, log in or pull real customer data, but the storage of data in any model is important for us to validate the business rules developed for the solution. At this point, the quality of the code, good UX practices when structuring the page, creativity for flows and data listed in the portal will be evaluated.

- The application must be developed in some front-end framework and can use any libraries that help in the development of the page. After the end of the project, the candidate must publish the solution in a GIT repository.

## Key points

- Integrations with APIs of any nature, which enhance the solution
- Quality of page design
- Internal documentation and organized code structuring (no need external documentation). During the presentation of the developed solution, the following will be evaluated: communication, structuring of ideas, power of argument and, again, creativity.

## How this assessment was approached

My approach for this assessment was using MongoDB and Next.js. For the login page I used NextAuth, which connects to MongoDB collection and checks if there is a existing user in the database. If yes, it proceeds to dashboard screen, and if not, it sends the user to a register page.

![Hairplace Intro](https://raw.githubusercontent.com/codearis/assets/master/images/hairplace/intro.webp)

In the register page it will use a POST HTTP request to send email, name and password and save it to MongoDB selected collection (user or hairdresser). After successful registering, it will redirect the user to the login page. When logging in, you have the option to choose between user and hairdresser and it will redirect to different type of dashboard. For the assessment only the user dashboard was developed.

![Hairplace Screen](https://raw.githubusercontent.com/codearis/assets/master/images/hairplace/screen.webp)

For scheduling I have created a simple array using plain Javascript/Typescript that checks the current date, and from that, it populates it with data, enabling or disabling actions based on day/time. The result was a Date data returned from the user interaction, that would be sent to database which and create a confirm dialog for hairdressers dashboard (TBD).

![Application](https://raw.githubusercontent.com/codearis/assets/master/images/hairplace/schedule.webp)

Since I decided to focus on UI, some of the implementantions from the backend were not completed until the deadline, but for the time given and the feedback received it was more than enough to pass the assessment and land the role.

## Techs used

- [Typescript](https://www.typescriptlang.org/)
- [React.js](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [styled-components](https://styled-components.com/)
- [MongoDB](https://www.mongodb.com/)

## Contact

- [Twitter](https://twitter.com/codearis)
- [LinkedIn](https://www.linkedin.com/in/ariel-christmann/)
- codearis@icloud.com



# Developing a Weather App with React, Typescript and OpenWeatherAPI

Live demo: [https://codearis-weather-app.vercel.app/](https://codearis-weather-app.vercel.app/)

This project was built following an asssessment for Hatchways - Frontend Practice Project, where the goal was to replicate the frontend application provided (as close as
possible). It was allowed to use any frontend framework (React.js, Vue.js, etc.) or use
plain Javascript, HTML, and CSS.

The finished application should look like this:

![Application](https://hatchways.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff9224e62-3e6f-4a2a-9904-665a81e42c8e%2FScreenshot_from_2021-08-17_16-18-35.png?table=block&id=0aa4a239-668e-4ba2-b2ae-cfdba1014a0c&spaceId=6bb19204-9262-4b1f-9a9e-d450329fd633&width=2000&userId=&cache=v2)

More info about this assessment can be found [here](https://hatchways.notion.site/hatchways/Front-End-Practice-Assessment-0a0723b34cae4e41912ff6bf5b7c2b77)

## How this assessment was approached

Since the application request was simple with hard coded values, I decided to expand it promoting a better user experience with dynamic values, using the same tools provided with a personal touch. These are the results:

![Approach](https://raw.githubusercontent.com/codearis/weather-app/main/images/app.png)

You can also check a live demo in the link below (if the application won't work the number of requests reached the limit for the free plan)

## Techs used

- [Typescript](https://www.typescriptlang.org/)
- [React.js](https://reactjs.org/)
- [Jest](https://jestjs.io/)
- [styled-components](https://styled-components.com/)
- [OpenWeatherApi](https://openweathermap.org/api)
- [React Leaflet](https://react-leaflet.js.org/)

## Getting Started

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

```js
gh repo clone codearis/hatchways-frontend-practice
```

```js
cd project
```

```js
yarn install
```

## Usage

The app will require you to sign-up at OpenWeatherAPI to get an API key.
With your API key, create a `.env` file at `./project` folder with the variable `REACT_APP_OPEN_API = "api key"`

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

## Contact

- [Twitter](https://twitter.com/codearis)
- [LinkedIn](https://www.linkedin.com/in/ariel-christmann/)
- codearis@icloud.com



# How I decided to change career and become a developer

I never thought I would end up being a developer. Even having computers around me since the start of the Millenium, I always looked to programming with skepticism. Computers until then were pure entertainment for me and my family. Oh, the glorious days playing my favorite playlist on Winamp while browsing ICanHasCheezburger or defeating an army of orcs at Warcraft II! Such nostalgia!

### The graphic designer

I recall the internet in a moment where memes ain't even named memes. Instead, we had funny pictures. Uppercase white `Impact` font with a `1px solid black` border and a jolly cat picture was the template to success.

![Invisible Bike](https://lh3.googleusercontent.com/vH3RcK8sDnmKjJvIxUpSZg6WgEzbJftKP_4ZbzJ8fb9cjSER-B67lu0corKnqAyxwu_ih9Urg-KJuiCUJ0uZkcNIUTNIMVa8lkybWQ=s0)
_I have found this picture at an NFT site. There were simpler times._

And with such knowledge here I was creating funny cat pictures on Photoshop for the Internet. Little did I know that I would end up land a graphic design job at a local small newspaper for having basic editing skills.

My graphic design experience never led to a bigger role in the company. I delivered for 7 years the newspaper demands and they were happy about it. And me too since the tasks were easy and I had plenty of free time to spend my young days and study for the Management bachelor's degree I was enrolled.

### The teacher

One of the newspaper clients came to the office in the afternoon to check an ad I was responsible for designing. She was the director of a local English school and was looking for a new instructor. I had basic English knowledge at that time (one of my cat memes hit the hot page!) and I thought "why not?". I was invited to have a conversation about the role and then hired to be the new instructor!

The year was 2013 and the beginning of my teaching career. The kids enjoyed the clownish way I explained topics and I had a great and funny time with them.

My eyes opened to further markets and while I was not in the newspaper or at the school, I was studying to become a public school teacher. This led to my second degree (Licentiate Portuguese/English) and then an approval to work part-time in public service (union worker) in a nearby city.

### The developer

Skip to 2020 and pandemics, classes now are online and I had to record youtube videos for my students explaining the book lessons.

It was around April 2021, on a sunny cold Saturday afternoon, browsing random Youtube content that a video appeared: "The Benefits Of Becoming a Web Developer" by Brad Traversy. I could be having fun with podcasts or fail videos but decided to give it a try. This one leads to another one about web development, another about HTML, CSS and Javascript. It was already Sunday and here I was setting up my first IDE.

![Ariel Developer](https://i.imgur.com/XGad1DT.jpg)

I always had a thing for design and technology and those videos kinda suited the path. So decided to take the web developer roadmap, and from there dive into front-end skills. Half of my routine is now decided to learn programming while still teaching English to kids.

About eight months later, 2022 arrived and a big career change was made. Today, about a year later, I am dedicated full-time to approaching advanced concepts and frameworks, materializing personal projects with ease while improving my coding skills, better and better.

That's my motivation to learn how to scale websites and mobile apps, deliver suitable solutions and improve metrics, aiming to be a high-level developer.


Blog

I made a fullstack application using Next.js and MongoDB for a frontend assessment

Developing a Weather App with React, Typescript and OpenWeatherAPI

How I decided to change career and become a developer