Semester Project for 2. year students in Front-End Development, at Noroff VOC Oslo, Norway. Student: Linda Sandaker, aka frk.Sandkake
An auction site is looking to launch a website where the users themselves can put up items for auction. Only registered users can list items and make bids, but unregistered users can see all the auctionen items. New registered user are given 1000 credits to use on the site. They can get more credits by auctioning of items.
The project is to build a front-end application that handles the provided API.
Unregistered user should be able to view Listings, and register with stud.noroff.no email.
Registered users should be able to log in and log out. Update their avatar. Create a Listing, with Title, DeadlineDate, Gallery, and Description. They should also be able to view their total credit, use credit to make a Bid, and view Bids made on a Listing
The highlighted ones have been chosen for this project:
| CSS Framework | CSS processors | Hosting services | Design Application | Planning Application |
|---|---|---|---|---|
| Bootstrap (>5) | SASS/SCSS | GitHub Pages | Adobe XD | Trello |
Tailwind (>3) |
PostCSS |
Netlify |
Figma |
GitHub Projects |
| MUI (>5) | Sketch |
Documentation: Auction house-EndPoints Testing: API Swagger
The target audience is a younger crowd that likes Thrift shops, both finding unique items and supporting charities.
The color palette for my design comes from the logo underneath. It has a vintage feel with the tape cassette. The colors, in yellow, purple and cyan, are vibrant and playful. Background colors are dark zinc and light amber and hopefully gives the visitors and users a calm and warm impression.
The logo is self-made with the website title "Thrift&Share" in a gradient from the color palette.
On GitHub:
- Fork this repo to get your own copy AND/OR
- Copy the code URL or SSH link that you find under
<> Codebutton
Locally, on your PC:
- In Terminal
cd .\path\to directory/folder for your local workspace- run:
git clone <Github repo URL or SHH> - then
cd .\path\to new folder with repo name
- Then open your IDE/code editor
- Open the directory (or folder) with your cloned repo
Command lines to run in terminal:
| Commands | Description |
|---|---|
npm install |
Installs all packages in Package.json in the node modules |
npm run build |
Builds the project into minified version (dist folder) |
npm run preview |
To preview the project in minified mode (from dist folder) |
npm run dev |
To see the whole project |
Other package command lines:
| Commands | Description |
|---|---|
npm run lint |
Checks for errors and warnings for; Prettier, Babel and ESLint |
npm run lint-fix |
Runs Prettier setup, fixes some errors (see more in console) |
Good to know npm Command lines:
| Commands | Description |
|---|---|
npm init -y |
Will initiate a new Node JS project Package.json |
npm outdated |
To see the outdated packages |
npm update |
Updates the project dependencies |
npm update <packagename> |
Updates a specific project dependency |
npm uninstall <package_name> |
Uninstalls a project dependency |
npm update -g |
Use -g flag for global dependencies |
npm update -D or --save-dev |
Use -d or --dev flag for devDependencies |
npm uninstall -g <package_name> |
aviyel.com Top 5 reasons why you should use flowbite right now
daily-dev-tips: Vanilla JS forEach function that calls all Modals
tailwind CSS responsive design
redpixelthemes: tailwindcss gradient text
(YouTube) Floating labels with Tailwind
free code camp: 4 reasons your z-index isn't working and how to fix it
ESlint: Parsing Error Unexpected Token