Based on "The Net Ninja's" YouTube 'Vuetify' playlist
Link: https://www.youtube.com/watch?v=2uZYKcKHgU0&list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5
The only reason I made this project was to learn how to use Vue, Vuetify and Firebase.
I made this website after watching the videos in the playlist mentioned above, as it was the first time I was learning about Vuetify, practicing it would be good for my understanding of the framework! Same goes for Vue, although it wasn't the first time I used Vue or Nuxt.
Homepage (Logged out, menu open)
Homepage (Logged in, menu open)
Homepage (Logged in as admin, menu open)
About
Creating new account
Login
Creating new project
The menu options inside the drawer are stored in the database and not hardcoded, so you will need a database to render them. The reason I did this, was so that if there was a need to a new menu option, there would be no need touch code, as there would be an option in the admin's Control Panel to add a new menu option.
Same goes for the "About" page, which for every user created, makes a new entry which uses the user's avatar url, their "about" description, "role", and "name".
Database structure for the user's info:
about - Input in the "about" section.
admin - Always false. For the first admin of the page, this attribute needs to be set in the database to true. If I have time, In the future I may add an option for converting a normal user into an admin through the admin's Control Panel.
avatar - Link in the "avatar url" section.
email - Input in the "email" section.
name - Input in the "name" section.
password - Input in the "password" section.
show - Always false, becomes true when the user clicks the "About" button in a user's card at the "About" page, which shows their "About" description.
role - Input in the "role" section.
Database structure for the menu options:
icon - The Material icon name for the icon to be displayed in the menu.
route - The URL to be loaded when the button is clicked.
title - The name of the button in the menu.
view - Who can view this menu. ("guests" for not logged in, "users" for logged in users, "admins" for logged in users which the admin attribute set to true)
Database structure for the admins:
email - Every entry in this database collection has this single attribute, which if matched with the user's e-mail used to login, makes the user an admin. (Unsafe, needs improvements. As mentioned, just a prototype.)
Database structure for the projects:
content - The project's description.
delete_item - Always false. (Should be set to true once the project item is hovered by an admin, in order to show the delete option, but I haven't implemented this yet.)
edit_item - Same as the delete_item, but for editing.
person - Who created the project. Every project you create has this attribute set to your account's name.
status - Status of the project. (Queued, Overdue, Finished, Ongoing)
title - Title of the project.
Firebase rules were set to public.
-
Add a loading indicator for asynchronous items in the form of SVG cards.
-
Add animations to some transitions, interactions.
-
In the homepage/dashboard, load only a few items and asynchronously load more items while scrolling down the page.
-
Fix the underline below items in the navbar.
-
Add edit and delete buttons to projects when hovering the projects in the dashboard, where you would only be able to do so to your own projects, unless you're an admin, in which case you would be able to do anything to any project.
-
Possibly move each project to it's own external page in the website.
-
For users that are admins, have a "Control Panel" menu option, which takes you to the Control Panel, where you can manage any projects, existing users, give admin rights to normal users, delete users, etc...
-
Improve the creation of projects by adding a text editor, maybe also add a page for project creation.
-
Let all projects be HTML/CSS/JS pages (that would be the reason for the text editor) or standalone scripts, which can be visualized through the project's own page.
-
Change the theme of the website through a button.
-
In the "Settings" menu (appears for logged in users), add sections for managing the user's profile, such as their "about" description, save a theme for the website, change colors, hide the navbar, move the menu's options to the navbar, and more.
-
Add buttons for changing the way projects are displayed in the main page, add a option in the "Settings" menu for the users where there would be a section called "Layouts" in which you could save your preferred page layout.
-
Make the page responsive for mobile, as I haven't had the time to do that yet.
-
Optimize the code, improving readability, naming, removing unnecessary lines, repetitions, etc...
-
Allow the user to change their password and recover it.
-
Add a search bar for projects.
-
Let users favorite projects, where all the favorited projects would be in the "Favorited" menu
-
Add router transitions, improve the logic behind Nuxt's loading bar in the top of the page to actually match the page load time regardless of the user's internet connection.
-
Add Vuex to the project and change everything accordingly.
-
Perhaps change the database?
-
Fix the hardcoded user interaction with the database, improve security measures.