CodingStunts.github.io/react-game-reviews.html at main · CodingStunts/CodingStunts.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Review Site</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="sub-frame">
      <img id="background-img" src="Media/Photos/background-image.jpg" />
      <div class="see-through-background"></div>
      <section class="project-page">
        <a href="index.html">
          <img
            src="Media/Photos/logos-icons/back-arrow.png"
            class="back-icon"
          />
        </a>
        <div class="app-text">
          <h1>Room with a Review</h1>
          <br />
          <p>
            This is the front-end element of my Northcoders project phase. It is
            a React site, styled (scantily) with vanilla CSS. It provides the
            interface to present and interact with the API on my back-end server
            <a href="games-server.html">here</a>. It allows you to access
            filtered lists of reviews by several queries, view the users of the
            review site, see associated comments, and you can like and comment
            on each review. It currently uses a pseudo-login for ease as the
            database has a set list of users. Please see the hosted version
            <a href="https://room-with-a-review.netlify.app/" target="_blank"
              >here</a
            >. Also,
            <a href="https://github.com/CodingStunts/nc-games" target="_blank"
              >here</a
            >
            is the GitHub repo to have a closer look at the code.
          </p>
        </div>
        <section class="screenshots">
          <div class="single-screenshot">
            <img
              src="Media/Photos/React/React-landing-page.png"
              class="games-server-screenshot"
            />
            <h4>The landing page, with a psuedo-log in.</h4>
          </div>
          <div class="single-screenshot">
            <img
              src="Media/Photos/React/Popular-reviews.png"
              class="games-server-screenshot"
            />
            <h4>The home page with the current most popular reviews.</h4>
          </div>
          <div class="single-screenshot">
            <img
              src="Media/Photos/React/All-reviews.png"
              class="games-server-screenshot"
            />
            <h4>All reviews page, with filters.</h4>
          </div>
        </section>
      </section>
      <div class="see-through-background"></div>
    </div>
  </body>
</html>