TheOne Fitness Trainer Website Development

TheOne project involved the creation of a premium-class fitness trainer website, from initial design to full stack development. The site was built using Bootstrap, React.js, SCSS, Node.js, MySQL, and Strapi as the CMS. The design included advanced scroll animations, meaningful imagery generated with MidJourney, and a robust backend to support the content and user management.

• Frontend: Bootstrap, React.js, SCSS
• Backend: Node.js, MySQL, Strapi
• Tools: MidJourney for image generation
• CSS Methodologies: BEM, OOCSS, SMACSS

Initial Design and Planning

The project began with a detailed design phase, where the client’s requirements were translated into wireframes and mockups using Bootstrap’s grid system for responsive layouts.

Example: Header and Hero Section with Bootstrap

import React from 'react';

const HeroSection = () => (
  <header className="bg-dark text-white py-5">
    <div className="container">
      <h1 className="display-4">Your Path to Perfection!</h1>
      <p className="lead">I am ARAM ELBAKYAN - Your Premium-class Fitness Trainer.</p>
      <a href="#services" className="btn btn-primary btn-lg">Get started</a>
    </div>
  </header>
);

export default HeroSection;

Frontend Development

The frontend was developed using React.js and SCSS, with a strong emphasis on modular and reusable components. Advanced scroll animations were implemented to enhance user engagement.

Example: Advanced Scroll Animation with React and SCSS

import React, { useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';

const ScrollAnimation = () => {
  useEffect(() => {
    const handleScroll = () => {
      const elements = document.querySelectorAll('.animate-on-scroll');
      elements.forEach((el) => {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
          el.classList.add('visible');
        }
      });
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="container">
      <div className="animate-on-scroll p-5 my-3 border">Scroll to see me animate!</div>
      <div className="animate-on-scroll p-5 my-3 border">Scroll to see me animate!</div>
    </div>
  );
};

export default ScrollAnimation;

SCSS

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

  &.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

The backend was built using Node.js and MySQL, with Strapi as the CMS for managing content. The backend provided endpoints for fetching data and allowed the admin to manage content through Strapi’s interface.

Example: Node.js Endpoint

const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'theone'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to database');
});

app.get('/api/services', (req, res) => {
  const sql = 'SELECT * FROM services';
  db.query(sql, (err, result) => {
    if (err) throw err;
    res.json(result);
  });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Integration with Strapi

Strapi was used to handle the content management, allowing for easy updates and scalability.

Example: Strapi Model Configuration

module.exports = {
  definition: {
    kind: 'collectionType',
    collectionName: 'services',
    attributes: {
      title: {
        type: 'string',
        required: true
      },
      description: {
        type: 'text',
        required: true
      },
      image: {
        type: 'media'
      }
    }
  }
};

Responsive Design: Ensuring the website looked great on all devices required meticulous testing and adjustments using Bootstrap’s responsive utilities.

Scroll Animations: Implementing smooth scroll animations involved optimizing performance to avoid jank and ensure smooth transitions.

CMS Integration: Integrating Strapi required careful planning to ensure that all content types were flexible and could be easily managed by non-technical users. Conclusion

TheOne project showcases the power of combining modern frontend and backend technologies to create a seamless and engaging user experience. By leveraging tools like Bootstrap, React.js, SCSS, Node.js, and Strapi, the project was successfully delivered with a focus on performance, scalability, and user satisfaction.