/cvwo-assignment-24-frontend

Primary LanguageTypeScript

CVWO 2024 Assignment Frontend

Name: Josh Thoo Jen Sen

This is the progress of my React-TypeScript backend as of 25 January 2024.

I will be doing my own changes to enhance this forum website, as I want to learn more. Please consider looking at my working frontend repository which I will commit to beyond the deadline: https://github.com/josh1248/forum-website-frontend

This React app can handle:

  • Users: View of users, ability to create users (which you can verify by viewing users), login check of users, including passwords. Accepting cookies with JWT upon successful login.
  • Posts: View of posts.

I did not implement:

  • Users: Deletion of users, administrator capabilities.
  • Posts: creating, deleting, updating posts. Creating posts based on JWT, which would have allowed auto-fill of username when creating the post.
  • Comments: comments in posts.

Getting Started

Running the app

  1. You should first set-up the backend through which this frontend will connect to. You can find the repo containing the backend snapshot here.
  2. Ensure that the backend server is running.
  3. Fork this repo.
  4. Clone your forked repo.
  5. Open your terminal and navigate to the directory containing your cloned project.
  6. Install dependencies for the project by entering this command:
yarn install
  1. Run the app in development mode by entering this command:
yarn start
  1. Open http://localhost:3000 to view it in the browser.
  2. You should be able to see a Hello, World! greeting, with 4 links to different parts of this website.

Implementation Details

  • This project uses Typescript.
  • This project uses MUI. It has also bootstrapped the Register / Login page templates.
  • ESLint and pretierrc are used, but ignore the templated pages above due to different coding syntax conventions.
  • Axios is used as a framework for communications with the backend.
  • react-dom-router is used to handle routing across the website.

The file structure of the src folder is shown below. It is generated by the file-tree-generator extension at VSCode for free use.

📦src
 ┣ 📂components
 ┃ ┣ 📜HelloWorld.tsx
 ┃ ┣ 📜SeePosts.tsx
 ┃ ┗ 📜SeeUsers.tsx
 ┣ 📂configs
 ┃ ┗ 📜config.tsx
 ┣ 📂pages
 ┃ ┣ 📜AllPosts.tsx
 ┃ ┣ 📜AllUsers.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜SignIn.tsx
 ┃ ┗ 📜SignUp.tsx
 ┣ 📂skeleton_copy
 ┃ ┣ ... //carbon copy of src files as they were at time of fork. For reference.
 ┣ 📂types
 ┃ ┣ 📜Post.tsx
 ┃ ┗ 📜User.tsx
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┣ 📜index.tsx
 ┗ 📜react-app-env.d.ts