Mododificil

This project has come a long way, since it is the beginning of my learning and where I have applied most of my knowledge.

This project is a landing page that includes a blog with posts that I am constantly updating.

In this landing page I have applied knowledge of programming languages such as: HTML, CSS, BootStrap, Tailwind, Firebase, Angular, Cloudflare, among others.

Table of content

• Demo
• Requirements
• Features
• Built with
• Develoment
• What impacted me positively
• My challenge
• What Do you need for run this project
• Build

Demo

🚀 Mododifil.com

🤓 Features

• Landing page
• Four paths are needed: Home, About me, blog and, contact.
• The "home" path should list the first 6 posts.
• The "blog" path should contain the list of all posts.
• Each post should have the content of the post.

👩🏽‍💻 Built with

• Angular CLI: 13.1.3
• Node: 20.10.0 (Unsupported)
• Package Manager: yarn 1.22.17
• Tailwind
• WebStorm editor

Develoment

This was my first page and is the reason because I was want to have idea of the structure of the app.

As I'm not a designer, I helped myself with some online tools like Mockflow and finally created my mockup en Figma.

After doing that, the structure of my app go to do ordered in my mind.

First I created my Angular-app and installed CSS (this was in my first versions) because I found that I can use framework like BootStrap, Tailwind between other with You can design and add styles betters.

Separated all my components and folders in a way that I can understand if I have what do changes. Also, it is useful to me, so I use this order in others projects like a guide.

Have a folder for each use is a great tool of learning because I learned the functionality of services, data, page, and UI.

💪🏽 What impacted me positively

• The evolution of web application is the same as my learning.

• Every learning of a new style framework, a new concept or a new version of Angular is reflected here. I started with Angular V8.

• The refactoring and the order it started with is currently very different. Leaving learnings about clean code, application architecture, design and more.

  My challenge

• Learn new syntax in style frameworks.

• The decision of where to host the data changed more than 3 times between Firebase, my own backend application that was more of a manager, and finally my own project that used Markdown.

• For server side rendering, I first had my domain and used "good daddy" and then switched to Cloudflare because it was free.

• Making the routes work was a task that involved more than 10 prototypes.

  

• I solved the functionality of displaying a certain amount of post on the home page with this service.

What Do you need for run this project

1. Install dependencies. You will only have to do this once.

npm install

😉 I prefer yarn, here is an article for you to decide.

2. ng serve

Build

• Run ng build to build the project.
• The build artifacts will be stored in the /dist/mododificil.com/browser directory.
• Use the --prod flag for a production build.