Skip to content

phpaivamotta/blog_laracasts_repo

Repository files navigation

About blog_laracasts_repo

This repo was initially created as I was following along with Laracasts' Laravel 8 From Scratch tutorial (at www.laracasts.com). After the series was done, I decided to keep working on the project. The project has now turned into a full-on website being operated by my partner, Jessica Szklarz, who already used the medium platform as a blog, but did not have an exclusive website yet. You can visit the website at https://www.polianaporcelana.com.

Although this project got staterted with the Laracasts' tutorial, I have added many of my own features to it, as I further describe below.

Pages

The website has 14 pages:

  1. landing
  2. individual post
  3. about the author
  4. register
  5. login
  6. forgot password
  7. reset password
  8. user profile
  9. user edit profile
  10. admin posts dashboard
  11. admin users dashboard
  12. admin create new post
  13. admin edit post
  14. admin edit about section

Features

The website is a simple blog, where the users can read the blog posts, like or comment on the posts, search for posts and keywords, and subscribe to newsletters.

Although this project was created by following the Laracasts tutorial, I have since added several pages and functionalities of my own. For instance, pages 3, 6, 7, 8, 9, 11, and 14 did not exist in the original Laracasts project. I have also added extra functionalities, such as: the user being able to like a post, the user being able to share a post on social media (LinkedIn, Whatsapp, Facebook, and Twitter), the admin being able to delete the users and/or the user's comments, the admin being able to hide a post from the main posts index view, the admin being able check who liked and commented on a certain post or which posts a user liked or commented on, the admin being able to see how many unique views a post got (this was done by tracking the users ip address, but the website is also connected to Google Analytics for further insights). Moreover, I have added modals for all deletion tasks and for the hiding of posts task. I have implemented the modal feature with the help of Livewire and Alpine.js. I have also used Livewire to validate all forms in real time and to provide loading indicators and instant image display when appropriate (such as in profile picture upload or post thumbnail upload). I've also used Livewire to instantly update the likes and comments in the post view page. I should also note that the original project was not mobile friendly, and I had to adapt it to mobile, which took quite a bit more work than I expected...

Stacks

The website runs on a DigitalOcean Laravel droplet. This droplet uses a LEMP stack by default.

The TALL stack (Tailwindcss, Alpine.js, Laravel, and Livewire) was used for the development of this application.

What you don't see

I feel like it is a bit of a shame that most of the features I have implemented on my own are features only the admin can use, such as seeing who liked and commented on a post, or how many views the post got, or even being able to delete a comment. Because of that, below are some screenshots of the admin view, so that you can have a peek at the features implemented. It should be noted that the site is in Portuguese because my partner's blog is written in Portuguese and focused on a Brazilian audience, so the text in the screenshots you are about to see are in Portuguese.

Admin posts dashboard

image Note: the eye icon represents the number of unique ip adresses that have visited the post, which was also a feature implemented by me after the tutorial.

Admin posts dashboard confirm delete post modal

image

Admin posts dashboard confirm hide post modal

image

Admin posts dashboard see who commented on post

image

Admin posts dashboard see who liked post

image

Admin users dashboard

image

Admin users dashboard confirm delete user modal

image

Admin users dashboard see which posts user commented on

image

Admin users dashboard see which posts user liked

image

Admin delete comment option

image

Admin confirm delete comment modal

image

Admin create new post

image Note: the ckeditor text area for the body of the post at the bottom of the form

These are some of the features only the admin gets to use. Although there are other admin featurs, they were already implemented in the Laracasts' tutorial. All other features can be seen by any user who creates an account.

What I wish to change/add

  • Picture uploads
    • Instead of resizing it with css, cropping it at upload, to avoid deformed images
  • Ckeditor
    • Working with ckeditor was difficult. The styles ckeditor uses conflicted with tailwind's styles, which required a lot of debugging and manual adjustments.
    • I could not translate the editor itself, though I followed the documentation.
    • The text formatting displayed inside the editor is not consistent with what will be displayed when the text is posted (probably due to ckeditor style conflicts and how the editor treats &nbsp).
  • The ability to like a comment
  • The ability to comment on a comment
  • A notification alert system for both admin and users

Final thoughts

This has been a great project to work on! I've learned a lot! From the basics of working with Laravel, to deploying and updating my own project! Now, do I think this website that can substitute my partner's Medium posts? No. Do I think my website is going to be popular? Absolutely not. But is it a good first project? Hell yes! I've gone beyond the completion of the course and implemented new features and deployed it to the web. I think this is a good start. Now, I hope to keep building!