My experience in ADA internship program final wildfire quest. My team is called Agwu Nsi which was named after the Igbo god of wealth. We were told to build a mobile game and we came up with A trivia game called U-smart. My role was to develop a landing page for the game as a Frontend developer. Whilst building the landing page, my teammate Nafisat (Naphee) helped me build and we successfully finished it up. Below are step-by-step ways on how the article was built.

About the U-smart Trivia game

U-Smart is a trivia game that consists of different categories of questions to test a user’s intellect and general knowledge. The game is intuitive, didactic, and engaging because players answer interesting questions on any topic of their choice while gathering scores for each correct answer given.

This Game will:

1. Build brain activity.

2. Alleviate boredom.

3. Helps users learn.

To know about the U-smart Trivia game, please go through our product TRD

Steps on how the U-smart landing page was built using react.js

Building a landing page can be a daunting task, especially for beginners who are just starting with web development. However, with the right tools and guidance, anyone can build a great landing page. In this article, we will go through the step-by-step process of building the U-smart landing Page using React.js.

What is React.js?

React.js is a popular JavaScript library for building user interfaces. It allows developers to build complex UI components in a declarative and efficient way. React.js works by breaking down the UI into small, reusable components that can be rendered and updated independently.

Getting Started

Before we dive into the details of building the U-smart landing page, make sure you have the following tools installed:

1. Node.js and npm (Node Package Manager)

2. A text editor of your choice.

Once you have these tools installed, you can create a new React app using the following command:

npx create-react-app my-app

Replace my-app with the name of your app.

This will create a new React app with all the necessary files and folders. You can navigate to the app directory using the following command:

cd my-app

Now that we have a React app set up, let's start building the U-smart landing page.

Step 1: Setting Up the Project Structure

Before we start coding, let’s create the project structure. In the src directory, create a new directory called components. Inside the components directory, create a new directory for each component of the landing page. For example, create a Header directory for the header component, and a MainSection directory for the MainSection component.

my-app/

README.md

node_modules/

package.json

public/

index.html

favicon.ico

src/

components/

Header/

MainSection/

Step 2: Building the Header Component

Let’s start by building the header component. Inside the Header directory, create a new file called Header.js. This file will contain the code for the header component.

import React from 'react';

function Header() {

return (

<header className="header">

<nav className="navbar">

<a href="/">

<img src="/images/logo.svg" alt="U-SMART Logo" className="logo" />

</a>

</nav>

<div className="header-content">

<h1 className="header-title">Compete to Earn the Highest Badge</h1>

<p className="header-description">Download U-Smart today and play trivia games that will challenge you!</p>

<a href="#" className="download-btn">Download now</a>

<a href="#" className="download-btn">Learn More</a>

</div>

</header>

);

}

This code defines a Header function component that returns the HTML code for the header. The nav element contains the img element contains the logo. The h1, p, and a elements contain the title, description, and button for the header section.

Step 3: Building the mainSection Component

Next, let's build the mainSection component which contains the mainSection.js,Video section.js,startPlaying.js, choose avatar.js,chatSection.js files. Inside the component, all this file will contain individual codes.

Below is the code snippet of the mainSection.js

import React from 'react';

import ChooseAvatar from './ChooseAvatar';

import StartPlaying from './StartPlaying';

import './styles.css';

const MainSection = ({ isChatBotVisible }) => {

return (

<section className="main-section-bg">

<ChooseAvatar />

<StartPlaying isChatBotVisible={isChatBotVisible} />

</section>

);

};

export default MainSection;

Next we build the Avatar section.js;

import React, { useState } from 'react';

import avatar1 from '../../assets/avatar1.svg';

import avatar2 from '../../assets/avatar2.svg';

import avatar3 from '../../assets/avatar3.svg';

import './styles.css';

const ChooseAvatar = () => {

const [animation, setAnimation] = useState(false);

return (

<section className="choose-avatar-section">

<div data-aos="fade-right">

<h1 className="choose-avatar-heading">Choose Your Avatar</h1>

<p className="choose-avatar-heading-description">

Choosse the avatar you like and set your name to have a profile page.

Here, all your scores and achievements are saved.

</p>

<p className="choose-avatar-heading-description">

You can save and share your profile and achievements to friends and on

social media.

</p>

</div>

<div

className="avatar-axis-outer"

data-aos="fade-left"

onMouseEnter={() => setAnimation(true)}

onMouseLeave={() =>

setTimeout(() => {

setAnimation(false);

}, 1000)

}

style={{ animationDirection: animation ? 'reverse' : 'normal' }}

>

<section className="avatar-axis">

<img src={avatar1} className="avatar-1" alt="avatar-1" />

<img src={avatar2} className="avatar-2" alt="avatar-2" />

<img src={avatar3} className="avatar-3" alt="avatar-3" />

</section>

</div>

</section>

);

};

export default ChooseAvatar;

Next step is to create the start playing component;

import React from 'react';

import phone from '../../assets/blank_phone.svg';

import { badges } from '../../utils/data';

import { OtherButton } from '../Button/Button';

import Card from '../Card/Card';

import ChatSection from './ChatSection';

import VideoTutorial from './VideoTutorial';

const StartPlaying = ({ isChatBotVisible }) => {

return (

<>

<section className="new-main-section">

<section className="start-playing-section" data-aos="fade-right">

<div>

<img src={phone} alt="phone" />

</div>

<div data-aos="fade-left" className="start-playing-description">

<h1 className="start-playing-heading">Start Playing</h1>

<p className="start-playing-heading-description">

Playing is easy. You click on "Start", then pick a category. Once

you do that, you play to win. Make sure you don’t lose hearts

along the way.

</p>

<p className="start-playing-heading-description">

There are various categories you can pick from, so go ahead and

select whichever you want. Play as many times as you like from

different categories.

</p>

<OtherButton text="Play Game" />

</div>

</section>

<h1 className="award-heading">Awards</h1>

<div className="awards-container" data-aos="fade-up">

{badges.map((bdg) => (

<Card item={bdg} />

))}

</div>

<VideoTutorial />

<ChatSection isChatBotVisible={isChatBotVisible} />

</section>

</>

);

};

export default StartPlaying;

Next is to create the chatbot section which includes code snippet of the chatSection and also link to the chatbot endpoint itself that was deployed by our data Ladies.

import React, { useState } from 'react';

import chat_bubbles from '../../assets/chat_bubbles.svg';

const ChatSection = ({ isChatBotVisible }) => {

console.log(isChatBotVisible);

const [isChatting, setIsChatting] = useState(false);

console.log(isChatting, 'isChatting');

console.log(isChatBotVisible, 'isChatBot');

return (

<>

<section

className="chatbox-section"

data-aos="fade-up"

data-aos-delay="700"

onClick={() => setIsChatting(true)}

>

<div>

<p>Have Questions?</p>

<h1 className="chatbox-heading">Chat Us Up</h1>

</div>

<div className="chat_bubbles">

<img src={chat_bubbles} alt="chat_bubbles" />

</div>

</section>

{(!isChatBotVisible || isChatting) && (

<>

{!isChatting ? (

<div

onClick={() => setIsChatting(true)}

className="chat_section_sticky_icon"

>

<img src={chat_bubbles} alt="chat icon" />

</div>

) : (

<div className="chatbot_container">

<span

className="cancel_chatbot"

onClick={() => setIsChatting(false)}

>

X

</span>

<iframe

title="U-Smart Chatbot"

src="https://click.pstmrk.it/2sm/chatbot.appypie.com%2Fmobilebot.html%3Fcid%3D63ff5a8dd89acf5c73cb002d%26botid%3DBOTID1677679263782%26agent%3D63ff5a8dd89acf5c73cb002d%26utm_source%3Dchatbot_transactional%26utm_medium%3Demail%26utm_campaign%3Dtrialwithoutcreditcard%26utm_content%3Dwelcometoappypiechatbot!/MTZF4TgN/DkpR/L9elHRErW9/Q2hhdGJvdF9mcmVldXNlcl9tYWlsMDFfV2VsY29tZXRvQXBweVBpZUNoYXRib3QhfQ"

className="chat_section_sticky_chatpage"

></iframe>

</div>

)}

</>

)}

</>

);

};

export default ChatSection;

The final stage of the landing page is footer which includes the U-smart logo and copyright. Below is the code snippet for how to create it.

import React from 'react';

import logo from '../../assets/logo.png';

import bg5 from '../../assets/bg-img5.png';

import './styles.css';

const Footer = () => {

return (

<section className="footer">

<img src={logo} alt="u-smart logo" className="img-logo-footer" />

<h1>&copy; Copyrights 2023 ADAPROJECT All rights reserved.</h1>

<img src={bg5} className="bg5-img" alt="u-smart logo" />

</section>

);

};

export default Footer;

Conclusion

In this article, I have shown step-by-step how to build the U-SMART landing page using React.js. I have demonstrated how to create the header and Main section components and how to combine them into the landing page.

React.js is a powerful JavaScript library for building user interfaces. It provides a modular and reusable approach to building UI components, which can help make your code more maintainable and scalable. By following the steps in this article, you can start building your own React.js applications and create stunning user interfaces for your users.