search

Jaomar92 / GamingWebsite

This is a React Website to explore and test out RAWG.io API using Typescript, Redux and Tailwindcss.
0 stars 0 forks source link

Project layout initialization #3

Closed Jaomar92 closed 9 months ago

Jaomar92 commented 9 months ago

Trying to implement this layout

Image

practically there is mainly 3 different pages which is core of the website. This one to give the client options of types of games based on newness, popularity and the websites recommeneded. But could do just 2 rows of newness and popular.

The Nav

For now i just want it to have a logo and fixed top.

The Just what the website Recommeneds

We'll have to save this option and can explore how we can manipulate the it late. Its just a Carousel that scrolls infinetly.

Newest, Trending and Hot picks

We'll explore the API param-queries to see what information we can pull from the API. Probably prepare the another README.md in the same directory to explain what kind of information we can pull based on query combinations.

Menu Sidebar

This should keep the states of filtering options of the website. So it should have Genre filter, platforms filter and a Search by name filter for now.

Footer

I plan to just have 3 cols and 2 rows to navigate to the website faster once the user has reached the bottom of the page and just like property ownership information of the website. as well as a attribution to RAWG.io link.

Steps

  1. We will create 3 new directories in the components directory:-

    • [x] Common: which will hold Navbar, MenuSidebar and Footer.
    • [x] pulls: which will hold Newest, trending and hot picks components.
    • [x] Layout directory: which will hold the position each component will be placed as mobile view will be different form the desktop view.

  2. Push to the repository

    • [x] Document each next step we need to take to set up the store, routes and theme.
Jaomar92 commented 9 months ago

Additional Enhancements added

1. Routes Directory

This would encapsulated in the App.tsx file wrapping the whole app.

In the process created a Base layout component to standardize the whole application no matter the URL link.

2. BaseLayout in the components directory

I'd like the Navbar, Footer and Menu bar to be available throughout the app having the same layout.

3. Views directory

This just keeps the pages of the application in a separate folder so for better organization and easy reference.

4. A Redux directory

There are two sub-directories:-

  1. Store: Keeps Slices and main store in.
  2. Utils: Keeps the Thunks to call the API which is used in the in the Store directory for later.

5. Common and Features directory

Common:

Keeps components used throughout the application.

Features:

Keeps Certain components special to certain pages. Each special component will be housed in their own directory representing the page they are in.