NC-Games

tickle122

About


What is NC-Games?

NC-Games is an application that serves news data in a similar manner to websites such as Reddit. The purpose of the site is to replicate an online community that facilitate board game ratings and discussion. Northcoders Games has game reviews which are divided into categories. Each review has user curated ratings which can be up or down voted using the API. Users can also add comments about a review. This site was created with the intention to consolidate my understanding of making a C.R.U.D application from a front end perspective.

This website has the functionality to:

  • Log in as a pre-determined user
  • View board game categories and add to these categories
  • View and filter reviews by different criteria, including pagination
  • Add comments to reviews
  • Upvote and downvote reviews and comments
  • Delete your own reviews and comments

Tailwind CSS

I created this project to focus on developing my CSS skills, in particular using a CSS framework for the first time - I chose Tailwind due to the rising popularity of this library. Tailwind and React were used to create all of the elements you can see on the website, including organising the grid of reviews.

I created my own button component, which was then adapted slightly throughout the site to create a stylised theme. The colour pallete is minimal and simple to continue this theme.

Overall, I found working with Tailwind intuitive, I am therefore looking to use this library further. My next step in this project will be to use Javascript and Tailwind to add animations to my site.

React Hooks

This site utilises React hooks: useState and useEffect that allows it to create and store variables. These variables can then be updated over time, and React will update our UI and the rendered html, whenever that state value is updated.

UseState is used to track the variables that are just available on the current page, such as the cards in the binder and the users to log in as. UseState is also used to operate the search function, with the reset button setting state back to null.

UseEffect is used to hold the current user logged it, as it is used across multiple pages of the website. This information determines who you post reviews and comments as, as well as which posts you can delete.

How to Interact with this Site

At the application's homepage, you will intially be sent to an About page, providing more detail about how to navigate the site and the purpose of it. From here you can use the dropdown navigation menu to navigate the site.

The reviews page shows a number of reviews which can be flitered and navigated through pagination. Users can interact with selected articles by upvoting / downvoting and by posting comments, as well as posting a new review of a board game. The Categories page also shows all of the board game categories that are available, from here you can add a new category.

The application has a default user logged in (tickle122), but this can be changed from the log in page, allowing you to post reviews and comments as a different user. The website also only shows the delete button on posts made by the user you are logged in as.