Prolific Gym | React Responsive Website

The Prolific Gym website is a comprehensive platform that provides visitors with valuable information about the gym's programs, values, and frequently asked questions. It consists of sections such as Programs, Values, and FAQ, along with pages like About, Plans, Gallery, Trainers, and Contact.

Overall, the Prolific Gym website is designed to provide an engaging and informative experience, helping potential members make informed decisions and showcasing the gym's commitment to excellence.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

User Experience

Users should be able to:

• Responsive Layout: Users can enjoy an optimized website layout that adjusts to their device's screen size, ensuring a seamless browsing experience across different devices.

• Interactive Hover States: Users can experience interactive elements on the website, such as buttons or links, that visually respond when hovered over, providing feedback and enhancing interactivity.

• Effortless Navigation: The website offers seamless navigation, allowing users to easily explore all sections and pages. With intuitive menus and clear navigation options, users can effortlessly find the information they seek and access various features of the website.

• Toggle FAQs: Users can toggle and access the FAQ answers to common questions and concerns, helping them make informed decisions about joining Prolific Gym.

• View Gym Facilities: Visitors can explore the image gallery to view photos of Prolific Gym's state-of-the-art facilities, gaining an understanding of the gym's environment.

• Contact the Gym: Individuals interested in joining or seeking further information can easily contact Prolific Gym through provided social media handles, facilitating direct communication.

• External Link Access: Users have the ability to visit external links that provide access to additional resources such as blogs, case studies, events, and communities. These external links offer valuable content and opportunities for users to expand their knowledge, stay updated on industry trends, participate in events, and engage with like-minded individuals in the gym community.

Screenshot

Desktop View

Mobile View

Links

• Github URL: Prolific Gym Repository
• Live Site URL: Prolific Gym

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid and Flexbox
• Mobile-first workflow
• React - JS library
• React Components
• Vite - Build tool and development server

Vite Setup Info

Project Requirement

• Nodejs - JavaScript runtime environment
  • Node.js comes with a powerful package manager called Node Package Manager. NPM provides access to a vast ecosystem of open-source libraries and modules, enabling developers to easily incorporate pre-built solutions into their projects.
• Dependencies
  • react
  • react-dom
  • react-icons
  • react-router-dom

Vite Installation Steps

• Open your terminal or command prompt.

• Ensure you have Node.js installed on your machine. You can check if Node.js is installed by running the following command:

  node -v

  If Node.js is not installed, download and install it from the official website: https://nodejs.org.

• Once you have Node.js installed, you can proceed with installing Vite globally. Run the following command:

  npm install -g create-vite

  This command installs Vite globally on your machine, making it accessible from any directory.

• Verify the installation by running the following command:

  create-vite --version

  This command should display the version number of Vite if the installation was successful.

• Create a new Vite project by navigating to the directory where you want to create the project. Run the following command:

  create-vite my-vite-project

  Replace "my-vite-project" with the desired name of your project.

• Change into the project directory:

  cd my-vite-project

• Install the project dependencies by running the following command:

  npm install

• Start the development server:

  npm run dev

  This command starts the Vite development server, and you can access your project at the provided local development URL (e.g., http://localhost:3000).

What I learned

import React from "react";

const Card = ({ className, children }) => {
	return <article className={`card ${className}`}>{children}</article>;
};

export default Card;

import { useState } from "react";
import { AiOutlinePlus } from "react-icons/ai";
import { AiOutlineMinus } from "react-icons/ai";

const FAQ = ({ question, answer }) => {
	const [isAnswerShowing, setIsAnswerShowing] = useState(false);
	return (
		<article
			className='faq'
			onClick={() => setIsAnswerShowing((prev) => !prev)}
		>
			<div>
				<h4>{question}</h4>
				<button className='faq__icon'>
					{isAnswerShowing ? <AiOutlineMinus /> : <AiOutlinePlus />}
				</button>
			</div>
			{isAnswerShowing && <p>{answer}</p>}
		</article>
	);
};

export default FAQ;

const scrollToTop = () => {
	window.scrollTo({
		top: -100,
		behavior: "smooth",
	});
};

<Link to='/about' onClick={scrollToTop} className='footer__link'>
	About
</Link>

<Link to='/' className='logo' onClick={() => setIsNavShowing(false)}>
	<h1 className='nav__logo'>
		Pr
		<img src={Logo} alt='Nav Logo' />
		lific&nbsp; <span> Gym</span>
	</h1>
</Link>

import { useState } from "react";
import { Link, NavLink } from "react-router-dom";

<ul className={`nav__links ${isNavShowing ? "show__nav" : "hide__nav"}`}>
	{links.map(({ name, path }, index) => {
		return (
			<li key={index}>
				<NavLink
					to={path}
					className={({ isActive }) => (isActive ? "active-nav" : "")}
					onClick={() => setIsNavShowing((prev) => !prev)}
				>
					{name}
				</NavLink>
			</li>
		);
	})}
</ul>;

const Gallery = () => {
	const galleryLength = 15;
	const [images, setImages] = useState([]);

	useEffect(() => {
		const loadImages = async () => {
			const importedImages = [];

			for (let i = 1; i <= galleryLength; i++) {
				const image = await import(`../../images/gallery${i}.jpg`);
				importedImages.push(image.default);
			}

			setImages(importedImages);
		};

		loadImages();
	}, []);
};

const Home = () => {
	return (
		<div>
			<MainHeader />
			<Programs />
			<Values />
			<FAQs />
			<Testimonials />
		</div>
	);
};

export default Home;

export const trainers = [
	{
		id: 1,
		image: Trainer1,
		name: "Giovanni Juawo",
		job: "Personal Trainer",
		socials: [
			"https://instagram.com/",
			"https://twitter.com/",
			"https:facebook.com/",
			"https://linkedin.com/",
		],
	},
];

<div className='container trainers__container'>
	{trainers.map(({ id, image, name, job, socials }) => {
		return (
			<Trainer
				key={id}
				image={image}
				name={name}
				job={job}
				socials={[
					{ icon: <BsInstagram />, link: socials[0] },
					{ icon: <AiOutlineTwitter />, link: socials[1] },
					{ icon: <FaFacebookF />, link: socials[2] },
					{ icon: <FaLinkedinIn />, link: socials[3] },
				]}
			/>
		);
	})}
</div>

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/home/Home";
import About from "./pages/about/About";
import Footer from "./components/Footer";

const App = () => {
	return (
		<BrowserRouter>
			<Navbar />
			<Routes>
				<Route index element={<Home />} />
				<Route path='about' element={<About />} />
			</Routes>
			<Footer />
		</BrowserRouter>
	);
};

export default App;

--container-width-lg: 80%;
--container-width-md: 90%;

.container {
	width: var(--container-width-lg);
	max-width: 1920px;
	margin-inline: auto;
}

@media screen and (max-width: 1024px) {
	.container {
		width: var(--container-width-md);
	}
}

.footer__container {
	display: grid;
	grid-template-columns: 26rem 1fr 1fr 1fr;
	gap: 6rem;
}

.card:hover span {
	background: var(--clr-primary);
	color: var(--clr-gray-600);
	border: 1px solid var(--clr-secondary);
}

Continued development

• CSS Grid and Flexbox
• JS destructuring and map
• React components - create and reuse them
• React folder structure and organisation
• React hooks eg useState and
• React routing

Useful resources

• React Icons - This helped me to choose from a vast collection of icons.React Icons also helped me to apply styling and customization directly to the icon components using CSS styles.

• Free Image Resources

  • Pexels
  • Unsplash
  • Freepik

These resources offer a vast collection of free high quality images that helped enhance the visual appeal of my website.

• Remove Image Background -This tool helped me to remove image backgrounds easily, enabling a cleaner and more visually appealing presentation of my website's visuals.

• Tiny Image - Image Compression - This image compression tool helped me to shrink images for my website without loosing image quality since is uses a special smart loosy compression technic. It helped me to use less bandwidth and the site to load faster.

• Chatgpt - This ai helped me by providing valuable assistance in generating content for my website. It offered suggestions, ideas, and responses to help me develop engaging and informative website content.It also enabled me to save time in the content creation process.

• Color Palettes - This helped me to select the best color combination for my website.

Author

• Website - Parick Juawo
• Twitter - @pjuawo
• Facebook - @pjuawo
• Email - @pjuawo

Acknowledgments

• External links
  • Fitness Blogs
  • Fitness Case Studies
  • Fitness Events
  • Fitness Communities