About The Project

I am an semi-avid writer where I will try to document everything I found interesting and useful that can also serves as a refresher for later in future in the form of words, where I can read and reminisce.

Previously

I originally started this project around a year ago (as of the current edit) around May 2021 as my first hands-on project after I finished my last semester in the university. I have considered it to be completed around June 6 whereby most aspects of the blog had already been taken care of. However, there are actually a lot of things to be worked on and improve but I refuse to acknowledge it and goes on with my life on other projects. It was left with a lot of bugs too!

Now

I have decided to refurbish this project and make it into actual use for my future blog posting. It took a lot of courage to actually dive back into an old project that had been abandoned the day it was declared "complete" and to be honest, I am very happy with my decision as making it better and better really motivates me to progress further.

(back to top)

Cheers (Clap button)

Cheers, the clap icon from Medium.com is also available for each of the article for the users to interact. It is analogous to Facebook's like or Instagram's love button that allow users to express their interest on the subject that is being presented.

An unexpected issue

To store such states in this project, I originally tried to use SQLite because of it's simplicity and I don't need to manage a hosted databases as it would be an overkill for such a simple use case. However, I had faced numerous issues that are related to SQLite while deploying to Vercel.

After debugging for a while on why it works fine on my local development setup but failed while deploying, I found the culprits and addressed them accordingly in my next deployment. The deployment was a success. Just as I thought everything works and about to celebrate, I found out that the database is inaccessible as evidenced by unpersisting states and failed API calls.

The list of original exposed endpoints

```

Get all data in the database

GET /api/cheers

Retrieve number of cheers of an article

GET /api/cheers/:articleId

Increment number of cheers of an article

POST /api/cheers/:articleId ```

The first endpoint fails in the Vercel hosted environment but works fine in local. It returns 500 internal server error each time I visit the endpoint. Frustrated, I searched Is SQLite supported in Vercel in Google and found out that SQLite is NOT supported on Vercel.

Reason being that Vercel host our projects on Serverless Functions (a.k.a lambdas, epheremal storage) that allows running code on-demand by upscaling or downscaling base on the traffic. In other words, there instance that host the codes may be terminated at some point and being replaced by another new instance.

Hence, the data and files that does not track by the version control system will be wiped off when the instance dies off. I should have researched on the compatibilities before I implemented anything.

The codes will still work in a traditionally hosted file system environment thus I created a fork to introduce cloud hosted databases.

Considering Remove Firebase

I am currently comtemplating to remove Firebase and replace it with localStorage. This will simplify the feature.

(back to top)

Built With

Here is a list of technologies that this projects are built and depend on.

• Next.js
• React.js
• Sass
• Typescript
• TailwindCSS
• Contentful
• Firebase
• Framer Motion

(back to top)

Roadmap

• [x] Renovate website
• [x] Use env for all urls
• [x] Add animations
• [x] Add 404 page
• [x] Update skeleton
• [x] Add to top button
• [x] Quasi-workable cheers button
• [ ] Bookmarked page
• [x] Add tags page
• [ ] Add publication

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

Chong Mum Khong - @has66771004 - noname1@1utar.my

Project Link: https://github.com/data-miner00/blog

(back to top)

Acknowledgments

Resources that I've found useful and used for reference as well as information gathering during my quest to revamp this project from its previous version.

• Choose an Open Source License
• GitHub Emoji Cheat Sheet
• Malven's Flexbox Cheatsheet
• Malven's Grid Cheatsheet
• Img Shields
• GitHub Pages
• Font Awesome
• React Icons
• Reddium
• Fedium
• Medium
• Kent C Dodds
• Screenlane
• Next.js API Routes with SQL DB
• Reddit Post
• Rendering Linked Assets Entries in Contentful
• Contentful API Docs

(back to top)