Starting with your skeleton code, implement a web app that looks and flows similar to the design shown below.
Your solution should satisfy the following:
- Colors, font widths and sizes, margin sizes and padding sizes should be applied to HTML elements using classes defined in src/assets/main.css.
- Choose a color pallet, define it in src/assets/main.css, and use it throughout the app.
- The app should contain 4 views, one for each of the path specified above.
- The links in the navigation menu should work and allow the user to navigate to the different views.
- When the user presses the SIGN IN button, the handler should verify that all fields are non-empty. If not, an error message should be displayed on the screen. Otherwise, the username should be stored in localStorage and the user should be redirected to /main.
- When the user presses the JOIN button, the handler should verify that all fields are non-empty. If not, an error message should be displayed on the screen. Otherwise, the username should be stored in localStorage and the user should be redirected to /main.
- When the main view is displayed, the username should be displayed on the screen as depicted above.
I have put a copy of the code for the original Vue project on my GitHub account. You can find it here. I have also put the code for my demonstration here.
When complete, build your project and deploy it on Digital Ocean.