Side Project FitVitFitness.com

Website: FitVit

Screen shot of homepage

A side web project launched in December of 2022 called FitVit which stands for 'Fitness and Vitality'. I developed the site with a personal trainer named Chris Daoud, providing fitness workout programs and information to motivate people to stay fit.

Fitness has been one of my passionate hobbies in recent years. I got excited to develop this project with Chris, who is also passionate about fitness. He's much more experienced, and knowledgeable than I am, which he pursued a trainer certification. Read more about Chris Daoud if your curious.

Overview & Goal

The goal of the site is to provide tips and workout programs to help people stay fit especially with busy lifestyles. People tend to lose motivation as they want to avoid living at the gym or paying for a costly membership but still want a healthy lifestyle. Overall, the pandemic has affected people where and how they train as fewer gym facilities being used.

People want to stay fit by receiving information and easier ways of training which can keep them motivated or even how to begin their fitness journey.

Eventually, in the future, a mobile app will be developed which will allow users to track their workout progress from their device.

My Role of the Project

I was the solo developer and created the site from the ground up.

I began designing the desktop & mobile mockups using Figma. Brainstorming up some mockups with colour schemes and UI elements. This is how I usually go about getting all the UI layouts organized, so I have a clear vision how to architect the components with pixel perfect styling.

Once that was done, I decided upon the proper framework for this type of project and began developing the actual components and archtecture of the website. I won't get into all the technical details which will be described below, which framework I choose.

Web Framework Stack

I decided to develop the site using Next.js which is based on React.js. I do have knowledgeable experience and worked with React.js in the past in previous companies. React.js allows you to easily create reusable components through the site for example the header component, footer component and buttons etc. Next.js is a full fledge framework that handles routing and gives you building blocks to create a fast web site or app.

My goal was to have a static page website with a blog section. Next.js provided an easy way to integrate using Markdown (MDX) as each file is generated as a static page which is not rendered by the server dynamically or using some database to store the article like WordPress.

Performance was taken into consideration as static web pages are much more performant and important for SEO purposes. Static websites are served from a CDN server whose load times are faster and Firebase hosting provides this solution. Other cloud services do provide this solution but Firebase is one platform that offers other services which I will needed in the future, for example, Firestore and Authentication.

For my repository I use GitHub which includes all my other projects. I set up GitHub actions to automatically build and deploy updates to production. In the process of creating a new blog, I create a new markdown file, push it to the branch and deploys automatically.

Conclusion

So here is a quick rundown of tech stack and tools I used:

• Figma
• Next.js (React.js)
• CSS (not sass)
• Typescript
• GitHub with CI Deployments using Actions
• Firebase Hosting
• VSCode

We are currently in the progress of creating more blogs and adding more content. Also tweaking SEO technical impprovments and keeping eye on Google Analytics. We are planning a newsletter section integration with Mailchimp, storing all future user emails that we want to manage.

Will keep you updated in the future for more improvements and features. If you fns the site and content useful or have any suggestions we are opened to hear them

Thanks for reading!