Kevin Powell - Community•2mo ago

help with first backend project

im gonna be doing my first backend project, im already familar with frontend, and i just finished a 4 hour mysql tutorial the project that i picked is called "personal blogging platform api", and these are the tasks that im given:- Return a list of articles. You can add filters such as publishing date, or tags. Return a single article, specified by the ID of the article. Create a new article to be published. Delete a single article, specified by the ID. Update a single article, again, you’d specify the article using its ID. my question was that: isnt this like 99% a frontend project, where even is the backend part in these tasks.

28 Replies

Jochem•2mo ago

"api" implies there's no frontend you return json based on data fetched from a database, filtered by input from the frontend the code that receives the request from the frontend, gets data from the database, reformats it, and sends it back to the frontend is the backend code

13eck•2mo ago

None of that can be done on the front end, so I don't understand your question. The browser can't create a new article or get a list of them. That's literally what the back end does For example, to return a single article the back end needs to receive a request for the specific article. Potentially verify that the request is valid (the user has permission to do that). It then needs to search the DB for the data, potentially read the file system for the pre-rendered file, and send it back to the front end.

bfmvOP•2mo ago

ohh btw what does "returning" mean here? is it the same as loading so any project that includes api is a fullstack project?

13eck•2mo ago

The front end asked for a resource. The back end must give it to them. return as in a function return, where it sends the reponse to the HTTP request for the data All REST APIs are, yes

bfmvOP•2mo ago

ohh

13eck•2mo ago

But "API" as a term can be almost anything. For example, fetch has an API—it's how you use fetch. document.querySelector() is part of the Document API. Using canvas to animate things uses the Canvas API "API" is simply a term that means "this is how you interface with THING"

bfmvOP•2mo ago

is the dictionary, weather apps i made using dictionary api, and free weather api also a backend project?

13eck•2mo ago

Most back ends these days use a REST API, where you send an HTTP request to the back end to do something and it returns the data requested

bfmvOP•2mo ago

13eck•2mo ago

Depends: did you code anything on the back end? If so, yes. if not, no :p "Back end" means "it runs on the server". Your HTML and CSS are front end, since it runs in the browser, also called a client.

Client    <====> Server
Front end <====> Back end

Client    <====> Server
Front end <====> Back end

bfmvOP•2mo ago

const form = document.querySelector("form")
const resultContainer = document.querySelector(".result")
const tempResult = document.querySelector("#temp")
const cityName = document.querySelector("#city")
const fahrenheit = document.querySelector("#fahrenheit")
const celsius = document.querySelector("#celsius")
const input = document.querySelector("input")

celsius.classList.add("active")
let tempUnit = "celsius"

celsius.addEventListener("click", (e) => {
 tempUnit = "celsius"
 e.target.classList.add("active")
 fahrenheit.classList.remove("active")
}) // select temperature unit

fahrenheit.addEventListener("click", (e) => {
 tempUnit = "fahrenheit"
 e.target.classList.add("active")
 celsius.classList.remove("active")
}) // select temperature unit

form.addEventListener(("submit"), (e) => {

 e.preventDefault()
 let inputValue = input.value
 
 async function getApi() {
  let url = `http://api.weatherapi.com/v1/current.json?key=435d2c5ad26448cba8c150119251907&q=${inputValue}`
  
  try {
   let res = await fetch(url)
   let json = await res.json()
   let temp
   
   if (tempUnit == "celsius") {
    temp = json.current.temp_c
   }
   else if (tempUnit == "fahrenheit") {
    temp = json.current.temp_f
   }
   
   cityName.textContent = inputValue
   tempResult.textContent = temp + " degree" + ` ${tempUnit}`
   resultContainer.classList.add("show")
  } catch(error){
   console.error(error.message)
  }
 }
 getApi()
})

const form = document.querySelector("form")
const resultContainer = document.querySelector(".result")
const tempResult = document.querySelector("#temp")
const cityName = document.querySelector("#city")
const fahrenheit = document.querySelector("#fahrenheit")
const celsius = document.querySelector("#celsius")
const input = document.querySelector("input")

celsius.classList.add("active")
let tempUnit = "celsius"

celsius.addEventListener("click", (e) => {
 tempUnit = "celsius"
 e.target.classList.add("active")
 fahrenheit.classList.remove("active")
}) // select temperature unit

fahrenheit.addEventListener("click", (e) => {
 tempUnit = "fahrenheit"
 e.target.classList.add("active")
 celsius.classList.remove("active")
}) // select temperature unit

form.addEventListener(("submit"), (e) => {

 e.preventDefault()
 let inputValue = input.value
 
 async function getApi() {
  let url = `http://api.weatherapi.com/v1/current.json?key=435d2c5ad26448cba8c150119251907&q=${inputValue}`
  
  try {
   let res = await fetch(url)
   let json = await res.json()
   let temp
   
   if (tempUnit == "celsius") {
    temp = json.current.temp_c
   }
   else if (tempUnit == "fahrenheit") {
    temp = json.current.temp_f
   }
   
   cityName.textContent = inputValue
   tempResult.textContent = temp + " degree" + ` ${tempUnit}`
   resultContainer.classList.add("show")
  } catch(error){
   console.error(error.message)
  }
 }
 getApi()
})

this was the js code of the weather api app can u tell from this

13eck•2mo ago

That uses browser APIs, so it's front end code

bfmvOP•2mo ago

ohh

13eck•2mo ago

As far as JS goes: back end is Nodejs. Front end is browser

bfmvOP•2mo ago

oh yeahh

13eck•2mo ago

You interface with a backend, since you're calling the weatherapi.com REST API endpoint But you didn't do any of the coding on that REST API, so it's nota back end project

bfmvOP•2mo ago

yeah i was wondering how should i go about doing this project, im totally new to backend stuff i spent the past month practicing mysql

13eck•2mo ago

It's really not much different than the front end code you write, you just use the Node APIs instead of Browser APIs, but the core JS language is the same

bfmvOP•2mo ago

13eck•2mo ago

Several web APIs are still available in Nodejs, like fetch (did you know that fetch is a browser API and not part of the JavaScript langauge?)

bfmvOP•2mo ago

oh wow i think i read it in javascript.info

13eck•2mo ago

Back end code has more power, though, as you can access the local file system, get info about the local OS, even spawn local programs

bfmvOP•2mo ago

13eck•2mo ago

As an example, if you generate static HTML files for your articles, those would be saved to the local file system, so you'll need to use the fs module. Though usually that's taken care of by your reverse proxy (nginx or Caddy). Nodejs should not be used to do that in production

bfmvOP•2mo ago

oh also i was wondering, while learning backend, should i use the same routine i used to learn frontend, spend 99% of the time building projects one after the other?

Jochem•2mo ago

yup

bfmvOP•2mo ago

ohk

Jochem•2mo ago

tutorials are valuable as a start, making things is how you actually learn and remember

Gaming

Programming

help with first backend project

Did you find this page helpful?