FED CSS Frameworks Course Assignment

This bootstrap template is intended to help you deliever a amazing website which delights your end-users. Feel free to change, remove or start your own project from scratch. Please replace any text which starts with an _.

This is a vanilla website that displays a styled website using dummy data.

This project was bootstrapped with Vite.

Resources

• Brief
• Design
• Production deploy
• Deployment CI

Deployment

Your deployment is done via static hosting provider (Vercel is recommended). YOu can update your deployment pipeling by editing the vercel.json.

Report

ADD_YOUR_REPORT_HERE

Getting Started

In the project directory, you can run:

• install the project node module dependencies $npm i
• Runs the app in the development mode. npm run dev
• Open http://0.0.0.0:5173/ to view it in the browser.

Minimum acceptence criteria

All of these todo's must be done to pass the asssignment.

• As a customer I can view the searchbar component.
• As a customer I can fill a form to create a new post.
• As a customer I can list of posts.
• As a customer I can view a profile image.
• As a customer I can view details about a user
• As a customer I can view a users contact details
• As a customer I can view a users posts
• As a customer I can fill out a form to post on a users wall
• As a customer I can fill a form to login

Checklist

Make sure you go through this checklist before submitting your project to Moodle.

• All pages have a meta description.
• All pages have a valid title.
• All pages import the correct css files.
• All pages import the correct JS file.
• Input fields have the following attributes;
  • Name
• All images have an alt tag;
  • A name,
  • A placeholder,
  • A aria-describedby,
  • Required
• Removed all unused files.
• Named all images properly.
• Committed all my code to github.
• My repo is publically viewable.
• I've submitted/ written a report.
• I've removed all todo notes in code.
• I've removed all console logs in code.
• Code is formatted correctly.
• There are no red underlines in VSCode.
• There are no error messages in the terminal when I run the project.
• My code is indented correctly.
• I've checked my report for grammer & spelling using grammerly or chatGPT
• I've used used conventional commits
• I've checked off every todo in this README.

Help & Tutorials

• https://web.dev/learn/forms/
• https://fed-vocational-astro-course.vercel.app/en/css-frameworks/module-1/intro-to-sass
• https://dummyjson.com/
• https://www.youtube.com/watch?v=BEdCOvJ5RY4

Application stack

• Vite - Next Generation Frontend Tooling
• Prettier - An opinionated code formatter
• Eslint - Find and fix problems in your JavaScript code
• sass - Supercharged CSS .
• TanStack react-router - Modern and scalable routing for React applications.
• TanStack Query - Powerful asynchronous state management.
• Axios - Axios is a promise-based HTTP Client.

Authors

• YOURE_NAME (@your_github_username)
• Monde Sineke (@S3ak)