nss-evening-cohort-12 / nutshell-elk Goto Github PK
View Code? Open in Web Editor NEWRenaissance Faire
Renaissance Faire
As a user, when I visit the Souvenirs page not logged in I should see rows of cards of each available souvenir member.
WHEN the user visits the Souvenir section of the site via the homepage
THEN they should only see the available items displayed
WHEN the user is Logged-in they should see all of the items displayed
AND there should also be a visible option to edit the souvenir and delete the souvenir
AND there should be a add souvenir button at the top of the page
buildSouv
folderbuildSouv.js
file in that foldersouvData.js
to populate the cards (#23)<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Price</h5>
<h5 class="card-title">Description</h5>
</div>
<button type="button" class="btn btn-dark" id="edit"><i class="fas fa-user-edit"></i></button>
<button type="button" class="btn btn-dark" id="delete"><i class="fas fa-trash-alt"></i></button>
As a user when I am logged in I should be able to access the Events dashboard.
When logged in I should be on the home page which displays Food/Souvenirs/Shows/Staff modules
And I should see an Events module that is accessible
Then once I click the view button on the Events module I can then view all events available.
As a developer I need to be able to access my seeded data for each module in firebase
WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible
{
"staff1": {
"name": "Inigo Montoya",
"jobTitle": "Entertainer",
"imageUrl": "http://www.coolpic.net"
},
"staff2": {
"name": "Fezzik",
"jobTitle": "Security",
"imageUrl": "http://www.coolpic.net"
},
"staff3": {
"name": "Buttercup",
"jobTitle": "Queen",
"imageUrl": "http://www.coolpic.net"
}
}
As a user, I should be able to add shows to my Renaissance Fair.
WHEN the logged-in user visits the shows section of the site via the homepage
THEN they should see all of the currently scheduled shows on display
AND there should be a button to add shows on the page
AND there should be a form to add the show
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add
addShow.js
<form>
<div class="form-group">
<label for="addShow-name">Name</label>
<input type="text" class="form-control" id="addShow-name">
</div>
<div class="form-group">
<label for="addShow-scheduledTime">Job Title</label>
<input type="text" class="form-control" id="addShow-scheduledTime">
</div>
<div class="form-group">
<label for="addShow-description">Description</label>
<input type="text" class="form-control" id="addShow-description">
</div>
<div class="form-group">
<label for="addShow-imageUrl">Image Url</label>
<input type="text" class="form-control" id="addShow-imageUrl">
</div>
<button type="submit" class="btn btn-primary" id="show-adder">Update!</button>
</form>
showData.js
use Axios to post a food to the firebase databaseconst addShow = (newShow) => axios.post(`${baseUrl}/shows.json`, newShow);
As a user, I should be able to edit my spellin' mistakes on Foods.
WHEN the logged in user visits the Foods section of the site via the homepage
THEN they should see all of the available foods on display
AND there should also be a visible option to edit the foods
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit
editFoods.js
fileconst getFoods
function and axios.get
in foodData.js
to obtain the foodIdfoodData.js
file:const updateFood = (foodId, editedFood) => axios.put(`${baseUrl}/foods/${foodId}.json`, editedFood);
<form>
<div class="form-group">
<label for="food-name">Food name</label>
<input type="text" class="form-control" id="food-name">
</div>
<div class="form-group">
<label for="food-price">Price</label>
<input type="text" class="form-control" id="food-price">
</div>
<div class="form-group">
<label for="food-imageUrl">Image Url</label>
<input type="text" class="form-control" id="food-imageUrl">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
</div>
<button type="submit" class="btn btn-primary" id="food-editor">Update!</button>
</form>
foodId
As a User, When I view a category, I should not see the landing page.
When a user clicks on view
Then the landing page should disappear
Then the chosen category should appear
As a user, I should be able to delete a food from the menu.
WHEN the logged-in user visits the Food section of the site via the homepage
THEN they should see all of the currently available food on display
AND there should be an button to delete food on the page
AND if the user is not logged in, they should not see an option to delete
foodData.js
use Axios to delete staff from the firebase databaseconst deleteFood = (foodId) => axios.delete(`${baseUrl}/food/${foodId}.json`);
As a developer I need to be able to access my seeded data for each module in firebase
WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible
{
"show1": {
"name": "Sword Swallower",
"scheduledTime": 12:00,
"description": "blah blah blah blah blah",
"imageUrl": "http://www.coolpic.net"
},
"show2": {
"name": "Joust",
"scheduledTime": 2:00,
"description": "blah blah blah blah blah",
"imageUrl": "http://www.coolpic.net"
},
"show3": {
"name": "Glass Blowing",
"scheduledTime": 4:00,
"description": "blah blah blah blah blah",
"imageUrl": "http://www.coolpic.net"
}
}
As a user when I am logged out I will not be able to access the Events dashboard.
When logged out I will see displayed the Food/Souvenirs/Shows/Staff module
Then I will no longer see the Events module for me to click and access
As a user, I should be able update the quantities (remove/add) individual souvenir items, show items, staff members, and food items that have been added to the event without deleting/adding them completely from Firebase.
When a user is authenticated
And on an event page
Then a user can click on an individual component (staff, souvenir, show, food)
And change the quantity.
src/javascripts/components/editEventFood/editEventFood.js
src/javascripts/components/editEventStaff/editEventStaff.js
src/javascripts/components/editEventShow/editEventShow.js
src/javascripts/components/editEventSouvenirs/editEventSouvenirs.js
$('body'). on('click', '.edit-eventStaff', editEventStaff)
$('body'). on('click', '.edit-eventSouvenirs', editEventSouvenirs)
$('body'). on('click', '.edit-eventFoods', editEventFoods)
$('body').on('click', '.edit-eventShows', editEventShows)
As a developer I need a roadmap for how my data will be seeded in firebase
WHEN I visit the page, I should see it populated with the data stored on firebase
AND and when I log in, it should be CRUD compatible
{
"food": "cool",
"souvenirs": "cooler",
"shows": "coolerer",
"staff": "coolest"
}
As a user, I should be able to delete only the events I've created as well as delete souvenirs, shows, staff, and food items I've added to that event
When a user is authenticated
And Then they click on an event page
Then the user can delete an entire event
When they click on a delete button on the specific event page
src/javascripts/components/deleteEvent/deleteEvent.js
src/javascripts/components/deleteEventItems/deleteEventItems.js
$('body'). on('click', '.delete-event', deleteEvent)
src/javascripts/helpers/data/eventData
As a developer I need to be able to access my seeded data for each module in firebase
WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible
{
"souvenir1": {
"name": "Sword",
"price": 15,
"description": "blah blah blah blah"
"imageUrl": "http://www.coolpic.net"
},
"souvenir2": {
"name": "Crown",
"price": 20,
"description": "blah blah blah blah"
"imageUrl": "http://www.coolpic.net"
},
"souvenir3": {
"name": "goblet",
"price": 100,
"description": "blah blah blah blah"
"imageUrl": "http://www.coolpic.net"
}
}
The Landing page currently Hides by adding a display class to it when a component is viewed. This needs to be changed so that the Landing Page reprints to the dom with nothing in it.
Steps to reproduce
const hideLanding = () => {
const domString = '<div class="empty-landing"></div>';
utils.printToDom('#landingPage', domString);
};
$('#landingPage').addClass('hide')
with
landingPage.hideLanding();
if the component has
$('#landingPage').removeClass('hide')
use
landingPage.buildLandingPage();
As a user, I should be able to delete a staff member from the Renaissance Fair.
WHEN the logged-in user visits the Show section of the site via the homepage
THEN they should see all of the currently scheduled shows on display
AND there should be an button to delete shows on the page
AND if the user is not logged in, they should not see an option to delete
showData.js
use Axios to delete staff from the firebase databaseconst deleteShow = (showId) => axios.delete(`${baseUrl}/show/${showId}.json`);
As a developer I need to be able to access my seeded data for each module in firebase
WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible
{
"food1": {
"name": "Elephant Ear",
"price": 8,
"imageUrl": "http://www.coolpic.net",
"isAvailable": true
},
"food2": {
"name": "Funnel Cake",
"price": 6,
"imageUrl": "http://www.coolpic.net",
"isAvailable": true
},
"food3": {
"name": "Turkey Leg",
"price": 10,
"imageUrl": "http://www.coolpic.net",
"isAvailable": false
}
}
As a developer, when I create this repo, I should set up with webpack and implement firebase
WHEN the Dev opens this repo
THEN I should have an index.html, main.scss, and main.js files for starters
AND there should be all of the necessary webpack files and installs
As a user, I should be able to add possible souvenirs to my Renaissance Fair.
WHEN the logged-id user visits the souvenirs section of the site via the homepage
THEN they should see all of the available souvenirs on display
AND there should be an option to add a souvenir on the page
AND there should be a form to add the souvenir
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add
addSouvenir.js
<form>
<div class="form-group">
<label for="addSouvenir-name">Souvenir name</label>
<input type="text" class="form-control" id="addSouvenir-name">
</div>
<div class="form-group">
<label for="addSouvenir-price">Price</label>
<input type="text" class="form-control" id="addSouvenir-price">
</div>
<div class="form-group">
<label for="addFSouvenir-imageUrl">Image Url</label>
<input type="text" class="form-control" id="addSouvenir-imageUrl">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
</div>
<button type="submit" class="btn btn-primary" id="souvenir-adder">Update!</button>
</form>
souvenirData.js
use Axios to post a food to the firebase databaseconst addsouvenir = (newItem) => axios.post(`${baseUrl}/souvenirs.json`, newItem);
user can't view food when logged out. User should be able to view food when logged out.
uncaught error type
As a developer, I need to enable Google authentication for the site login
WHEN the user clicks the "login" button in the navbar
THEN a popup should appear
AND they should be able to log in to the site using their google credentials
AND once they are logged in, the "login" button should not be visible
AND once logged in they should be able to perform all actions on the dashboard (full CRUD).
AND the "logout" button should be visible
const loginButton
on auth.js, and const checkLoginStatus
on authData.jsconst logoutEvent
on navbar.jsAs a user, I should be able to see financial reporting broken up per module (Food, Shows, Souvenirs, Staff) for a specific event.
When a user is authenticated
And is on the financial reporting page for a specific event
Then they should see a table
And each column will be a component (food, souvenir, show, staff) and the total
And a row for each component's cost
As a User, I should see a landing page with Cards of Categories.
When I visit the Page, I should see Cards of Categories,
Then I should see a way to login
Then Then I should see buttons to open up each category
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
As a user, I should be able to add possible Foods to my Renaissance Fair.
WHEN the logged-id user visits the Foods section of the site via the homepage
THEN they should see all of the available foods on display
AND there should be an option to add a food on the page
AND there should be a form to add the food
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add
addFood.js
<form>
<div class="form-group">
<label for="addFood-name">Food name</label>
<input type="text" class="form-control" id="addFood-name">
</div>
<div class="form-group">
<label for="addFood-price">Price</label>
<input type="text" class="form-control" id="addFood-price">
</div>
<div class="form-group">
<label for="addFood-imageUrl">Image Url</label>
<input type="text" class="form-control" id="addFood-imageUrl">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
</div>
<button type="submit" class="btn btn-primary" id="food-adder">Update!</button>
</form>
foodData.js
use Axios to post a food to the firebase databaseconst addFood = (newFoods) => axios.post(`${baseUrl}/foods.json`, newFoods);
As a user when I click on the Events page I want to see all the events and the associated graph charts for each event.
When logged in and on the homepage I can see an events button that I can click
And once I click the events button I will be taken to the events page viewing all events
And I can see graph charts associated to each event showing the cost of each event.
As a user, I should be able to edit my spellin' mistakes on Staff.
WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the current staff on display
AND there should also be a visible option to edit the staff
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit
const getStaff
function and axios.get
in staffData.js
to obtain the staffIdeditStaff.js
filestaffData.js
file:const updateStaff = (staffId, editedStaff) => axios.put(`${baseUrl}/staff/${staffId}.json`, editedStaff);
<form>
<div class="form-group">
<label for="editStaff-name">Name</label>
<input type="text" class="form-control" id="editStaff-name">
</div>
<div class="form-group">
<label for="editStaff-jobTitle">Job Title</label>
<input type="text" class="form-control" id="editStaff-jobTitle">
</div>
<div class="form-group">
<label for="editStaff-imageUrl">Image Url</label>
<input type="text" class="form-control" id="editStaff-imageUrl">
</div>
<button type="submit" class="btn btn-primary" id="staff-editor">Update!</button>
</form>
staffId
completed on #22
As a user, I should be able to see(READ) entire Event with all the Staff, Food, Shows, and Souvenirs.
When a user is authenticated
And they click on the Event Page button
Then they can see a specific event
And all the Staff, Food, Shows, and Souvenirs added/pinned to that event
events.js
src/javascripts/component/events.js
src/javascripts/components/eventsList.js
#events-page
events.json
name:
food:
show:
staff:
souvenirs:
cost:
As a user, I should be able to edit my spellin' mistakes on Souvenirs.
WHEN the logged-in user visits the Souvenirs section of the site via the homepage
THEN they should see all of the current souvenirs on display
AND there should also be a visible option to edit the souvenirs
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit
const getSouvenirs
function and axios.get
in souvenirData.js
to obtain the souvenirIdeditSouvenirs.js
filesouvenirData.js
file:const updateStaff = (souvenirId, editedSouvenir) => axios.put(`${baseUrl}/souvenir/${souvenirId}.json`, editedSouvenir);
<form>
<div class="form-group">
<label for="editSouvenir-name">Name</label>
<input type="text" class="form-control" id="editSouvenir-name">
</div>
<div class="form-group">
<label for="editSouvenir-price">Price</label>
<input type="text" class="form-control" id="editSouvenir-price">
</div>
<div class="form-group">
<label for="editSouvenir-desc">Description</label>
<input type="text" class="form-control" id="editSouvenir-desc">
</div>
<div class="form-group">
<label for="editSouvenir-imageUrl">Image Url</label>
<input type="text" class="form-control" id="editSouvenir-imageUrl">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
</div>
<button type="submit" class="btn btn-primary" id="souvenir-editor">Update!</button>
</form>
souvenirId
As a user when I click and view a certain event I will also see a chart graph showing the cost of the event.
When logged in and on the homepage I can see an events button that I can click
And once I click the events button I can view all events available.
Then I can view each event individually and be able to delete and price will update
And once I click to view that event I can see food/souvenirs/shows/staff pertaining to that event
And I can see the total cost of modules that make up that event
As a user, I should be able to add staff to my Renaissance Fair.
WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the currently employed staff on display
AND there should be an button to add staff on the page
AND there should be a form to add the staff
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add
addStaff.js
<form>
<div class="form-group">
<label for="addStaff-name">Name</label>
<input type="text" class="form-control" id="addStaff-name">
</div>
<div class="form-group">
<label for="addStaff-jobTitle">Job Title</label>
<input type="text" class="form-control" id="addStaff-jobTitle">
</div>
<div class="form-group">
<label for="addStaff-imageUrl">Image Url</label>
<input type="text" class="form-control" id="addStaff-imageUrl">
</div>
<button type="submit" class="btn btn-primary" id="staff-adder">Update!</button>
</form>
staffData.js
use Axios to post a food to the firebase databaseconst addStaff = (newEmployee) => axios.post(`${baseUrl}/staff.json`, newEmployee);
As a user, I should see a navbar on every page with a logo and a authentication log in button\
WHEN the user is navigating the site
THEN they should always see a navbar at the top of the page
THEN they should see a clickable logo
THEN they should see a login button to the right
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand " href="#">
<i class="fab fa-fort-awesome-alt"></i>
</a>
<div id="auth"></div>
<button class="nav-link btn btn-danger" id="navbar-logout-button">Logout!</button>
</nav>
navbar.js
file in the folderimport firebase from 'firebase/app';
import 'firebase/auth';
const logoutEvent = () => {
$('#navbar-logout-button').click((e) => {
e.preventDefault();
firebase.auth().signOut();
});
};
export default { logoutEvent };
As a user, when I visit the Shows page not logged in I should see rows of cards of each available Show.
As a user, when I visit the Shows page logged in I should see rows of cards of each Show.
WHEN the user visits the Show section of the site via the homepage
THEN they should only see the available Shows displayed
WHEN the user is Logged-in they should see all of the Shows displayed
AND there should also be a visible option to edit the Show and delete the Show
AND there should be a add Show button at the top of the page
buildShow
folderbuildShow.js
file in that foldershowData.js
to populate the cards (#20)<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Scheduled Time</h5>
<h5 class="card-title">Description</h5>
</div>
<button type="button" class="btn btn-dark" id="edit"><i class="fas fa-user-edit"></i></button>
<button type="button" class="btn btn-dark" id="delete"><i class="fas fa-trash-alt"></i></button>
As a user, I need to see a b-e-a-utiful website
WHEN the user visits the site
THEN they should see a cohesive theme across the pages
AND it should be styled with good-looking fonts, colors, and images
As a user, when I visit the staff page I should see rows of cards of each staff member.
WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the current staff on display
AND there should also be a visible option to edit the staff and delete the staff member
AND there should be a add staff button at the top of the page
AND if the user is not logged in, they should not see any modifying buttons.
buildStaff
folderbuildStaff.js
file in that folderstaffData.js
to populate the cards<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Job</h5>
<h5 class="card-title">Id Number</h5>
</div>
<button type="button" class="btn btn-dark"><i class="fas fa-user-edit"></i></button>
<button type="button" class="btn btn-dark"><i class="fas fa-trash-alt"></i></button>
As a user, I should be able to see a detail page for a specific event.
When a user is authenticated
And clicks on a financial reporting button
That is located on a specific event page
Then they will be taking to a financial reporting page for that specific event
finances.js
Financial Reports
buttonsrc/javascripts/component/finances/finances.js
#finances-page
div using utils.printToDom('#finances-page, domString); functionThe owners of FreeLancer were very pleased with the results of V1 of their website but didn't have enough money to continue paying the same developers so they hired you. Now that they are able to perform full CRUD on Food, Souvenirs, Shows, and Staff they would like to be able to bring all the modules together and create events that get Food, Souvenirs, Shows, and Staff assigned to them. They would also like to be able to do some financial reporting and graphing to easily visualize how much revenue they are bringing in both per event and for all events. This application will mainly be used by the companies event planners.
Your Project Manager is LUKE
The demo for this project will take place on Tuesday August 4th
See Part 1 General Requirements Ticket - all those general requirements still apply.
NOTE - If your group finishes everything please ask your Project Owner for stretch goals - DO NOT MAKE UP YOUR OWN
As a user, I should be able to delete a staff member from the Renaissance Fair.
WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the currently employed staff on display
AND there should be an button to delete staff on the page
AND if the user is not logged in, they should not see an option to delete
staffData.js
use Axios to delete staff from the firebase databaseconst deleteShow = (staffId) => axios.delete(`${baseUrl}/staff/${staffId}.json`);
As a user, I should be able to edit my spellin' mistakes on Shows.
WHEN the logged-in user visits the Shows section of the site via the homepage
THEN they should see all of the current shows on display
AND there should also be a visible option to edit the shows
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit
const getShows
function and axios.get
in showData.js
to obtain the showIdeditShow.js
fileshowData.js
file:const updateShow = (showId, editedShow) => axios.put(`${baseUrl}/show/${showId}.json`, editedShow);
<form>
<div class="form-group">
<label for="editShow-name">Name</label>
<input type="text" class="form-control" id="editShow-name">
</div>
<div class="form-group">
<label for="editShow-time">Scheduled Time</label>
<input type="text" class="form-control" id="editShow-time">
</div>
<div class="form-group">
<label for="editShow-desc">Description</label>
<input type="text" class="form-control" id="editShow-desc">
</div>
<div class="form-group">
<label for="editShow-imageUrl">Image Url</label>
<input type="text" class="form-control" id="editShow-imageUrl">
</div>
<button type="submit" class="btn btn-primary" id="show-editor">Update!</button>
</form>
showId
As a user, I should able to add events to my event page
When a user is authenticated
Then clicks on a "Add New Event" button
Then it should create a page container
Where I can add staff, souvenirs, food, and show items onto
events.js
#events-page
src/javascripts/component/addEventForm/addEventForm.js
create axios.post()
commands to firebase to add to dataAs a user, I should be able to delete a staff member from the Renaissance Fair.
WHEN the logged-in user visits the Souvenirs section of the site via the homepage
THEN they should see all of the Souvenirs on display
AND there should be a button to delete a souv on the page
AND if the user is not logged in, they should not see an option to delete
souvData.js
use Axios to delete staff from the firebase databaseconst deleteSouv = (souvId) => axios.delete(`${baseUrl}/souvenir/${souvId}.json`);
As a user, I should be able to see all possible Foods at my Renaissance Fair.
WHEN the logged-in user visits the Food section of the site via the homepage
THEN they should see all of the current food on display
AND there should also be visible options to edit and delete the food
AND there should be an add food button at the top of the page
AND if the user is not logged in, they should not see any modifying buttons.
foodList
folderfoodList.js
file in that folderfoodData.js
to populate the cards<table class="table">
<thead>
<tr>
<th scope="col">Food</th>
<th scope="col">Price</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
<th scope="col">Is Available?</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">${food.imageUrl}</th>
<td>${food.name}</td>
<td>${food.price}</td>
<td><button type="button" class="btn btn-dark"><i class="fas fa-user-edit"></i></button></td>
<td><button type="button" class="btn btn-dark"><i class="fas fa-trash-alt"></i></button></td>
<td><div>
<input type="checkbox" id="food" name="food">
<label for="food"></label>
</div></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-dark"><i class="fas fa-user-edit"></i></button>
<button type="button" class="btn btn-dark"><i class="fas fa-trash-alt"></i></button>
Welcome to FreeLancer the worlds go to organizer of Renaissance Fairs. Now that your company has proven its worth at staffing all sorts of different Renaissance events the owners have decided to come out of the dark ages and build one of those FANCY things on the World Wide Web.
Your task is to create a dashboard for the owners to keep track of the Food, Souvenirs, Shows, and Staff they have available across all locations. They should be able to perform full CRUD on each of those 4 topics. Additionally they should be able to authenticate into the application - if they are not authenticated the website should perform READ only operations.
The owners of FreeLancer are expecting to see some great branding but they aren't sure what they want so make it flashy and make it remind them about why they fell in love with Renaissance Fairs in the first place.
The demo for this project will take place on Monday July 20th
NOTE - If your group finishes everything please ask your Project Owner for stretch goals - DO NOT MAKE UP YOUR OWN
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.