This-Website-(angular version)

After creating a project with ReactJS and another project with ExpressJS, I wanted to learn Angular - something I gave up learning a year prior. A month prior to the creation of my website, I tried to learn Angular by creating a port of Codentake (Codentake is now called Codenshare). Though I was able to get the main page and the add route working with Firestore, I abandoned the project to fix multiple problems with the original version of CodenTake, leaving the port on my PC for references only. It was after I finished creating TreasureStore that I wanted to build something new with Angular. Because creating a website is a crucial part in showing off my experience and the determining factor in whether or not I would get hired, I decided to kill two birds with one stone by building my website with Angular.

Process

This however was not the first time I tried to create a website of my own. The previous one displayed in the following gif was made using NextJS (not hosted)

Wanting to reuse the Card that showed the project title, description, and showcase image, I copied the code from that project into this current project and got rid of any react-specific code. I then made sure that all Cards would have a vertical view rather than a horizontal one because I wanted each of my projects to share a similar design pattern.

After finishing the main page, I worked on individual project pages. Like the Cards, the project pages pulled data from Firestore. Each page would have a showcase image, an array of images of the projects, the full description if the Cards were not big enough to show the whole description, and a development Log.

Development Logs

The development Log was where I spent most of my time developing. I knew that each Log would not be the same, so rather than changing my project's source code everytime I decide to change a Log, I would create them in Markdown. At first, I tried to import markdown files that I uploaded to Firebase hoping that Marked (a node Package that that converts Markdown Code into HTML) would read it and convert the file on the spot. However, I only converted the Link.

I then Attempted to implement webpack so that I could use a Markdownloader. However, dependency issues arose whenever I tried to use webpack with Angular.

Finally, I decided to create my own markdown editor and upload the markdown code to FireStore as a string.

This method was successful. Because I was using Firestore, I was able to update my Logs in real time without having to refresh the page on my website.