https://github.com/s3ak/fed-template-react-css-framework
Template for classroom course assignment
https://github.com/s3ak/fed-template-react-css-framework
css learning react react-router sass tanstack vitejs
Last synced: 3 months ago
JSON representation
Template for classroom course assignment
- Host: GitHub
- URL: https://github.com/s3ak/fed-template-react-css-framework
- Owner: S3ak
- Created: 2023-08-22T13:21:23.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-29T08:47:21.000Z (almost 3 years ago)
- Last Synced: 2025-06-10T13:49:07.710Z (about 1 year ago)
- Topics: css, learning, react, react-router, sass, tanstack, vitejs
- Language: JavaScript
- Homepage:
- Size: 126 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://fed-vocational-astro-course.vercel.app/en/css-frameworks/ca/ca)
- [Design](_LINK_TO_FIGMA_)
- [Production deploy](_LINK_TO_WEBSITE_)
- [Deployment CI](_LINK_TO_NETLIFY_VERCEL_DASHBOARD_)
## Deployment
Your deployment is done via static hosting provider (Vercel is recommended).
YOu can update your deployment pipeling by editing the [vercel.json](https://vercel.com/docs/concepts/projects/project-configuration).
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FS3ak%2Ffed1-exam-vanilla-frontend-website&env=API_TOKEN,API_SECRET&envDescription=The%20API_TOKEN%20is%20needed%20to%20access%20a%20secure%20API%20endpoint.%20This%20can%20be%20the%20Authorization%20%60Bearer%20Token%60%20header%20used%20to%20make%20queries.&envLink=https%3A%2F%2Fvitejs.dev%2Fguide%2Fenv-and-mode.html&project-name=exam-front-end&repository-name=fed1-exam-vanilla-frontend-website&skippable-integrations=1)
## 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](https://www.conventionalcommits.org/en/v1.0.0/)
- [ ] 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](https://vitejs.dev/) - Next Generation Frontend Tooling
- [Prettier](https://prettier.io/) - An opinionated code formatter
- [Eslint](https://eslint.org/) - Find and fix problems in your JavaScript code
- [sass](https://sass-lang.com/) - Supercharged CSS .
- [TanStack react-router](https://tanstack.com/router/v1) - Modern and scalable routing for React applications.
- [TanStack Query](https://tanstack.com/query/latest) - Powerful asynchronous state management.
- [Axios](https://axios-http.com/docs/intro) - Axios is a promise-based HTTP Client.
## Authors
- _YOURE_NAME_ (@_your_github_username_)
- Monde Sineke (@S3ak)