evenstensberg / evenstensberg/getting-started-with-open-source

Task 5: Wrapping up front end, starting with back-end and automation

Open
#17 0 comments 0 reactions 0 assignees View on GitHub
bug good first issue help wanted
Dominant language
JavaScript
Stars
10
Forks
6
PR merge metrics
No merged PRs in 30d

Description

## Summary

Hi and congrats on coming so far! It's expected to take these issues down at your own phase so don't worry if you haven't made it this far just yet!

## What you have done so far

As per now, we have built a very basic front-end application, which is capable to have routing and serve content on the client side. The client side means that the content on screen is being parsed at the user side of things (client) and not being sent from the server to a client.

This is what a back-end is for. Back-end is often responsible to send confidential data or data you don't want to share with the user to the user, unless it is data that belongs to the user. This is done by keeping a collection of each user (or anything else) within a so called storage unit ( database).

By saying that we can write browser code from the back-end is not entirely true, but allow me to explain what that means.

JavaScript is a client-sided language (nice catch if you caught that we actually can use JS server side too). JavaScript could be used to make things pretty, while the information we need is stored in back-end.

The opposition to JavaScript, might be a server-side language, such as PHP. This language sends the information to display from the server to the client. This is quite nice if you would like to hide a lot of logic and unneeded code from the user, but it comes with the disadvantage of being needed to be sent through the network. Things come at play here, such as latency, bandwidth and network related issues.

JavaScript is therefore a nice thing to have, because all the logic is being done at each device, such as a tablet, mobile phone or a display screen. The network bottlenecks are now gone, but we need to make sure that we only display the needed information to the user so that the website doesn't get slow.

So there's that!

### Your next task

Feel free to experiment with SCSS, CSS, JavaScript, React and Webpack. This is good if you want to focus on **front-end development.**

**For back-end people**, I advice you to start building a back-end for this service, which will contain relevant information about a user that logs into this site. There are plenty of guides out there, and you are free to use any programming language out there, such as MySQL, Java or any other back-end language.

Finally, **if you want to go into Dev-Ops/automatio**n, I'd advise you to check out automation, which will grab the tip of the tree ( latest code, i.e master branch) from github, run build scripts and then deploy it to a given site. Tools and resources are given at the end of this issue.

#### To summarize this issue short:

##### **If you want to focus on front-end, experiment with react, react rotuer and sass.**

##### If you want to focus on back-end, start creating a user database.

##### If you want to focus on automation, start experimenting with release scripts.

### Wrapping it up

Thanks for having the possibility to mentor! I'll be a bit busy these following months with a quite hard course on Operating Systems at unI, a full time job and Open Source with webpack. I'm also planning to write a book for O'reilly Media. Short story, I sadly don't have time to give you the quality mentoring you deserve. However, if you have any questions, I'm happy to answer those at twitter.

## Resources

### Front End

- https://www.w3schools.com/css/css_rwd_intro.asp
- https://www.tutorialspoint.com/sass/
- https://scotch.io/tutorials/create-a-simple-to-do-app-with-react

### Back End

- https://www.mysql.com/
- https://www.tutorialspoint.com/mysql/
- https://www.w3schools.com/nodejs/nodejs_mysql.asp
- https://dev.to/achowba/build-a-simple-app-using-node-js-and-mysql-19me

### Automation

- https://realpython.com/python-git-github-intro/
- https://github3py.readthedocs.io/en/master/
- https://surge.sh/
- https://www.heroku.com/

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.