Loading repository data…

room-homepage

Room Homepage is an application developed as a solution to the challenge of the same name proposed by Frontend Mentor website. As a differential for the development of this application, I chose to use NextJS (Framework based on React JS) together with SASS (CSS3 extension) in order to make the development process more practical, agile and responsive. The project was implemented respecting the responsive interface development model called "Mobile First", where initially the layout for mobile devices is created and, later, the structure created is adapted to the desktop model. In the case of this application, the development of the mobile interface was started considering the screen size of 375px and going up to 1440px, where it reaches the desktop model, as these were the reference values provided by the creators of the design of this challenge (however, the breakpoint which makes the division between the layouts is set at 1024px). Therefore, the application is fully responsive, adapting to devices with different screen sizes.

#html5#javascript#nextjs#reactjs#sass

README preview

Room Homepage (English / Português)

:art: Layout web

Project Presentation / Apresentação do Projeto

:mag_right: About the project / Sobre o projeto

The project was implemented respecting the responsive interface development model called "Mobile First", where initially the layout for mobile devices is created and, later, the structure created is adapted to the desktop model. In the case of this application, the development of the mobile interface was started considering the screen size of 375px and going up to 1440px, where it reaches the desktop model, as these were the reference values provided by the creators of the design of this challenge (however, the breakpoint which makes the division between the layouts is set at 1024px). Therefore, the application is fully responsive, adapting to devices with different screen sizes.

Room Homepage é uma aplicação desenvolvida como solução ao desafio de mesmo nome proposto pelo site Frontend Mentor. Como diferencial para o desenvolvimento deste aplicativo, optei por utilizar NextJS (Framework baseado em React JS) juntamente com SASS (extensão do CSS3) com o objetivo de tornar o processo de desenvolvimento mais prático, ágil e responsivo.

O projeto foi implementado respeitando o modelo de desenvolvimento de interfaces responsivas denominado "Mobile First", onde inicialmente é criado o layout para dispositivos móveis e, posteriormente, a estrutura criada é adaptada para o modelo desktop. No caso desta aplicação, o desenvolvimento da interface mobile foi iniciado considerando o tamanho de tela de 375px e indo até 1440px, onde alcança o modelo desktop, pois estes foram os valores de referência fornecidos pelos criadores do design deste desafio (no entanto, o breakpoint que faz a divisão entre os layouts é estabelecido em 1024px). Assim sendo, a aplicação é totalmente responsiva, adaptando-se a aparelhos com tamanhos de tela variados.

:gear: Technologies Used / Tecnologias utilizadas

Front end

HTML5
SASS (CSS3 extension)
Javascript ES6
NextJS (React Framework)

:file_folder: How to run the project / Como executar o projeto

Prerequisites / Pré-requisitos: npm / yarn

# Clone repository / Clonar repositório
git clone https://github.com/KlevertonOliveira/room-homepage.git

# Enter the project folder / Entrar na pasta do projeto
cd room-homepage

# Install dependencies / Instalar dependências
yarn install

# Run the project / Executar o projeto
yarn dev or/ou yarn build && yarn start

:raising_hand_man: Author / Autor

José Kleverton Yvens Oliveira

https://www.linkedin.com/in/klevertonoliveira/