Build a code snippet website

70 episodes
7 hours  26 mins

About this course

Let's build a code snippets website with Nuxt, Laravel and Tailwind. This project allows users to create 'snippets' with steps that act as a place to store useful bits of information.

Your teacher

Alex Garrett-Smith
Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

course episodes (70)

01. Introduction and demo

7m 46s

02. Nuxt and Laravel

7m 2s

03. Tailwind with Nuxt

4m 38s

04. Base styles with Tailwind

7m

05. Designing the navigation

12m 42s

06. The hamburger menu

4m 48s

07. JWT authentication

10m 38s

08. Getting authenticated user information

5m 50s

09. Environment variables

2m 7s

10. Signing in

8m 29s

11. Signing out

3m 16s

12. Designing form components

9m 8s

13. Really simple form validation

3m 45s

14. Don't forget about meta

3m 2s

15. Designing the snippet page

20m 5s

16. Designing the snippet edit page

13m 44s

17. Snippets and steps in the database

3m 45s

18. Creating a snippet

9m 52s

19. Snippet and steps transformer

12m 51s

20. Creating a snippet on the client

3m 56s

21. Editable snippet title

3m 28s

22. Output and edit ordered steps

7m 4s

23. Saving the snippet title

5m 42s

24. Saving step title and body

4m 35s

25. Updating the edit page title

2m

26. Navigating steps

3m 9s

27. Arrow step navigation

7m 8s

28. Applying everything to the snippet view page

8m 38s

29. Current step index

3m 58s

30. Tidying duplicated computed properties

2m 58s

31. Adding new steps

12m 23s

32. Ordering newly created steps

13m 10s

33. Hooking up ordering on the client

1m 51s

34. Deleting steps

10m 19s

35. Touching the last saved time

6m 14s

36. Toggling snippet public status

7m 45s

37. Reviewing permissions

12m 44s

38. Hiding the snippet edit button

1m 17s

39. Keyboard step navigation

6m 30s

40. Previewing markdown

5m 28s

41. Syntax highlighting

10m 38s

42. Implementing a code editor

12m 30s

43. Code editor tweaks

3m 15s

44. Browsing all snippets

19m 52s

45. Endpoint for user snippets

2m 44s

46. Listing snippets in the dashboard

4m 17s

47. Deleting snippets

2m 37s

48. Edit and delete links

4m 59s

49. Adding some missing page titles

1m 9s

50. Setting up Laravel Scout and Algolia

4m 58s

51. Indexing snippets for search

2m 53s

52. Setting up Algolia Vue InstantSearch

12m 24s

53. Implementing search

10m 15s

54. Search tweaks

1m 8s

55. Faceting search results

7m 32s

56. Reviewing client middleware

2m 10s

57. Public user profile endpoints

6m 37s

58. Public user profile

7m 42s

59. Patching a user

8m 18s

60. Account settings page

6m 32s

61. The home page

7m 15s

62. Setting the example snippet UUID

1m 54s

63. The Footer

6m 44s

64. Creating accounts

4m 8s

65. Creating an account on the client

5m 44s

66. Fix - Dashboard snippets count

47s

67. Fix - Showing snippet visibility

1m 30s

68. Fix - Clearing password on change

1m 6s

69. Fix - Clearing validation

1m 5s

70. Fix - Fixing various links

2m 50s
Want to stay in the loop about new content?
Of course you do.

© 2023 Codecourse Ltd. All Rights Reserved. Born in the UK.