·
Skate All day, Everyday!
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
- About the Project
- Getting Started
- Features and Functionality
- Concept Process
- Development Process
- Final Outcome
- Conclusion
- Roadmap
- Contributing
- License
- Contact
- Acknowledgements
Skate360 is an inventory management website for skateboards that allows the user to store stock and create unique and custom skateboard configurations with a touch of that good Grungy Punk theme to take you back into every skate park and make you feel right at home.
The following instructions will get you a copy of the project up and running on your local machine for development and testing.
Please ensure you have the latest version of Angular installed on your machine. The Plugin plugin will also be required.
The following is the link to the backend repo: backend repository
- Download the latest version of Angular CLI.
- use this command in your terminal.
npm install -g @angular/cli
- Download Postgres (pgAdmin4) and set up a database.
- Clone the GitHub repository using the URL.
- Clone the backend of the site using the URL.
- Launch the repo through Visual Studio.
Here are a couple of ways to clone this repo:
-
Open any IDE.
-
Clone Repository
Run the following in the command line to clone the project:git clone https://github.com/eddiesosera/skate-360
Open `Software` and select `File | Open...` from the menu. Select the cloned directory and press `Open` button. -
Install Dependencies
Run the following in the command line to install all the required dependencies:npm install
- First, link your backend to your database by filling in the required data in the "***" fields in both your config file and the data source file:
{
"type": "postgres",
"host": "localhost",
"port": 5432,
"username": "postgres",
"password": "***",
"synchronize": true,
"entities":["src/models/**/*"],
"database":"****"
}
-
Run your database
npm run dev -
Open and run your front-end project
ng serve --open -
See the site, open it in your Defulat browser, and enjoy.
In this site you are able to view the skateboard you are crafting in a 3D space where you can change each part as you wish.
When crafting a skateboard, you, the user, can drag and drop the parts you want into the craft view to apply them to the skateboard.
When creating a new item to add to the inventory, the user must fill out this form with valid information.
The Conceptual Process is the set of actions, activities, and research that were undertaken when this project was started.
Onboarding Page
Home Page
Inventory Page
Skateboard Page
Craft Page
Account Page
See Backend Repo For more! Backend repository
The Development Process refers to the technical implementations and functionality in the application's frontend and backend.
CRUD Functionality
Using the Openstock-Form To add a new item to the designated warehouse
constructor(private newStockService: NewStockService) { }
Warehouse Page
This is a function that loops through the location array to find the information that has been joined to it and allows it to be fetched.
filterSkateboardsByBoardType(boardTypeName: string, locations: any): any[] {
const filteredSkateboards: any[] = [];
for (const location of locations) {
for (const skateboard of location.skateboards) {
if (skateboard.configuration.board_type.name === boardTypeName) {
filteredSkateboards.push(skateboard);
}
}
}
return filteredSkateboards;
}
After the Looping function, we have an ``ngOnInit`, so in site init, we call all the relevant data that will be displayed in the warehouse card.
// to get all the location data
ngOnInit() {
// the "any" was LocationModel but it is acting weird
this.service.getAllLocations().subscribe((data: any) => {
console.log(data);
console.log(this.filterSkateboardsByBoardType("ramsy", data).length)
this.classicboardsLength = this.filterSkateboardsByBoardType("ramsy", data).length // for the classic board length
console.log(this.filterSkateboardsByBoardType("Long", data).length)
this.longboardsLength = this.filterSkateboardsByBoardType("Long", data).length // fot the long board length
console.log(this.filterSkateboardsByBoardType("Oldschool", data).length)
this.oldschoolboardsLength = this.filterSkateboardsByBoardType("Oldschool", data).length // for the oldschool length
this.locationList = data
// this.findItemByType(data[0].skateboards[0].boardtype)
this.wheelsLength = this.filterLocationForWheels.length
this.trucksLength = this.filterLocationForTrucks.length
})
}
To display the data on the warehouse-card-component we call the variable listed in the .ts file
<div class="warehouse-card-container">
<app-warehouse-card *ngFor="let item of locationList"
[location]="item"
[id]="item.id"
[numberOfClassicBoards]="classicboardsLength"
[numberOfLongBoards]="longboardsLength"
[numberOfOldschoolBoards]="oldschoolboardsLength"
[numberOfWheels]="wheelsLength"
[numberOfTrucks]="trucksLength"
></app-warehouse-card>
</div>
Skateboard Service Code
This is an example of the code used in the skateboard service file for the CRUD functionality.
getAllSkateboards(): Observable<Skateboard[]> {
return this.http.get<any>(this.baseUrl)
}
To get all the skateboards
getSingleSkateboard(id: number): Observable<Skateboard> {
return this.http.get<any>(`${this.baseUrl}/${id}`)
}
To get a single skateboard
createSkateboard(body: Skateboard): Observable<Skateboard> {
return this.http.post<Skateboard>(this.baseUrl, body)
}
To Create a new skateboard
updateSkateboard(id: number, body: Skateboard): Observable<Skateboard> {
return this.http.put<Skateboard>(`${this.baseUrl}/${id}`, body)
}
To Update a specific skateboard
deleteSkateboard(id: number): void {
this.http.delete<Skateboard>(`${this.baseUrl}/${id}`).subscribe(itemDeleted => console.log("deleted: " + itemDeleted))
}
To Delete a specific Skateboard
Account Page
{
path: 'account',
component: AccountComponent,
canActivate: [(state: RouterStateSnapshot) => {
// to check for data existing in the local storage
if (localStorage.getItem('userData')) {
return true; // to allow acces to the route
} else {
// redirects user to the onboarding page if data doesnt exist
// return state.router.createUser(['/onboarding']);
return state.url !== '/onboarding' ? state.url : '/onboarding'; // to avoid redirect looping
}
}]
},
{
path: '', redirectTo: '/account', pathMatch: 'full'
}, // defualt route
To redirect the user to the login page if they haven't been logged in
- Getting the 3D.js models to work and function properly.
- getting all the data to work properly.
- Bugs.
- Looping through the skateboard array within the location database to get the number of each different board type and the total number of boards (Ungerer).
- Inject other information from one table into another and then call that information (Ungerer).
- Get the warehouse cards for the home page (Ungerer).
- Populating the account page with the logged-in user's information and Calling in the skateboards that the user has made (Ungerer).
Eddie :
Frontend
- three.js and the 3D Interface
- Craft Page
- User Authentication
- Inventory page filters and sorting
- Adding Item Form and Function
- Home page
- Home page animated background
- home page skateboard section
- Navbar component
- Login form and authentication quiz
Backend
- Skateboard Route and Model
- Configuration Route and Model
- Location Route and Model
- User Model Route
- ormConfig
- Backend Authentication Route
Ungerer :
Frontend
- Warehouse Page
- warehouse card component
- inventory Page
- accounting page
- Home page warehouse section
- Side-Navbar component
- Frontend Readme file
- Mockup Photos
Backend
- Wheel Route and model
- Truck Route and model
- Bearing Route and model
- Board-Skin Route and model
- Board-type Route and model
- backend Readme file
Shared :
- General Desing
- Site Layout
- Populating the Site
- Redirecting an un-logged User to the login page when navigating to the account page
- Inventory New Stock item Form
Unit Tests were conducted to establish working functionality. Here are all the tests that were run:
Note
Postman and insomnia were both used to test all backend CRUD functionality.
Test 1 of Create User functionality :
- We tested the back of the user-create function using Postman to test the CRUD
Test 2 of Login Authentication Quiz functionality :
To test the Authentication quiz, we purposely got the answer wrong to see if it was working properly and then selected the right answer.
- We also tried logging in without completing the quiz to test if you could bypass the quiz.
Test 3 of Warehouse inventory route
- When clicking on the warehouse inventory, you are taken to the inventory linked to that specific warehouse, which shows all items that match that specific location.
- Refining The crafting process.
- Improving the responsiveness of the website.
To see a run-through of the application, click below:
View Demonstration Video · View Cool Promo Video
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Eddie Sosera
Ungerer Hattingh
Distributed under the MIT License. See License for more information
- Eddie Sosera - email@address - @instagram_handle
- LinkedIn - @eddiesosera, or Visit website.
- Ungerer Hattingh - email@address - @instagram_handle
- Project Link - https://github.com/eddiesosera/dv300-term1
- Backend Link - https://github.com/eddiesosera/dv300-term1-backend