DEV Community

Cover image for The basics : navigating a simple project workflow! 😅
grace
grace

Posted on

The basics : navigating a simple project workflow! 😅

You should be familiar with html and CSS

If you want to look at there more
Look here:

HTML:https://shorturl.at/vJwUf)
CSS:
JavaScript:
SQLite:

Using VSC:
Using Github:

Etc

So we all have access to GPT

But we also know that sometimes handcoding helps!

This guide is to look at the end to end journey or roadmaps

I am also comparing a few popular languages

such as

JavaScript:

Java:

and Python:

The goal is to get from a place of not being sure to white-boarding solutions in interviews in as little time as possible!

Interview prep:

But to be honest the only way to understand the landscape is to research, read blogs or literature and PDFs, or watch YouTube’s and this can all take hours, months and days!

Blogs I read:

YouTube’s I’ve watched:

Rather than waffle for 2-4 hours showing you how I’ve summarised one way you can grasp in seconds!

Why have I done this?! Because life is a gift 🎁 wasting it stuck in problems isn’t fair.

Here’s a quick recap of a useful workflow:

  1. Front-End:

• Ask GPT for a boilerplate (HTML, CSS, JS).
https://shorturl.at/CHl9H

Image description

• Input this into CodePen.
https://codepen.io

My codepen examples:

Image description
• Fork it or send it to GitHub to create a front-end repo. https://github.com

My repo:

Image description

Image description

  1. Back-End:

• Ask GPT for a boilerplate for a Node.js/Express server. https://expressjs.com/en/starter/hello-world.html

Node.js/Express:

Image description

• Use SQLite for the database (keeps things simple for a first project).
https://www.sqlite.org/

Image description
• Import this code into a separate GitHub repo for the back-end.

Backend repos:

• Set up API endpoints for the front-end to call (using AJAX or Fetch in JavaScript).

APIs:

Image description

Image description

Image description

Image description

Image description

Image description

  1. Connect the Front-End and Back-End:

To connect front and back ends, use APIs to handle requests, send data, and communicate between client and server applications.

• Front-end (in GitHub Pages) calls the API endpoints you create in the back-end (Node.js and Express).

https://youtu.be/ZTQcJWixB1k?feature=shared

Image description

Image description

• Use AJAX or Fetch to communicate with the back-end.

To connect front and back ends, use APIs to handle requests, send data, and communicate between client and server applications.

Image description

  1. Deploy:

• You can use GitHub Pages for the front-end.
https://pages.github.com

Image description

• For the back-end, host for free on Heroku or Vercel for Node.js apps, or explore GitHub Actions for automated deployment.
https://www.heroku.com

Vercel:

Github Actions :

Image description

This setup will let you host and share a full stack app quickly.

You won’t necessarily unlock all the knowledge around the implementation but it’s a quick start!

Let me know if you need help with any specific step!

in another link I can outline ML projects like this :

Image description

But that will take package knowledge, specific languages and tools… 🧰 There’s time for that another day!

But if you’re curious, here’s the link(I’m due to update it): https://shorturl.at/RhYCG

Top comments (0)