Project

Star Wars Responsive Info Site - Complete Website & App Funcionalities using SWAPI API's

My Role

Front End Development
UX / UI
Website Design
Funcionalities Design

Year

2022

The website I developed is a Star Wars information site built using the NextJS framework and the React library. I used languages such as JavaScript, HTML, and CSS to create the site.

One of the key features of the site is the use of the Axios library to fetch data from the Swapi.dev API. This API provides a wealth of information about the Star Wars universe, including information about characters, planets, vehicles, and starships.

Another important feature of the site is the dynamic menu located in the top right corner of the page. This menu allows users to navigate to different parts of the site and access additional information.

On the homepage of the site, users will find a variety of "cards" that contain information about characters, planets, vehicles, and starships. Users can click the "learn more" button on any of these cards to access more detailed information about the specific topic. Overall, the website provides a rich and engaging experience for fans of the Star Wars franchise.

Technical Bullet Points:

In addition to using NextJS and React, the website also utilizes various NPM packages to enhance its functionality. These packages include things like styled-components for styling and react-router for client-side routing.

To optimize the website's performance and ensure a smooth user experience, I implemented server-side rendering using NextJS's built-in capabilities. This allows the site to load faster and provide a more seamless experience for users.

To handle data management, I utilized the React Context API to create a centralized store for the website's data. This allows for easy management and manipulation of data across different components of the site.

To make the site more visually appealing, I implemented various design techniques such as responsive design, smooth transitions, and well-structured layout. This helps to create a visually appealing and easy-to-use interface for users.

Overall, the website is a well-crafted and technically advanced project that utilizes a variety of modern web development tools and techniques to deliver a rich and engaging experience for users.