Deniz's Intern Book

Deniz's Intern Book

• 1. Denız’s ıntern book Denız’s ıntern book July 8 – August 23
• 2. Introductıon to React js Introductıon to React js So for starters thIs week wIth guIdance of my advIsor at GobIto Development OffIce I started learnIng ReactJS on my basIc javascrIpt knowledge . He offered me Udemy vIdeos about It and I watched It for 2 days then started to buIld my own ReactJS App . What I learned about thIs perIod of tIme Is how to create a react app usIng cmd of WIndows then later I learned to how to use MIcrosoft VIsual Code for wrItIng code . I actually started wIth Atom Text EdItor but my advIsor saId that I shoul use VIsual Code whIch most developpers use. WEEK 1
• 3. My fırst React app My fırst React app I.Thıs Program created wıth react js. II.I used ghıblı-movıes apı for movıe data. WEEK 1
• 4. Slide4 It took a lot to learn how states and props work In ReactJS but I managed to grasp the sItuatIon of It later on . I contInued makIng small games wIth ReactJS from my past game experIments . I learned how to use Fetch API that lets you fetch JSON data from other apIs or Web Servers . Then my advIsor made a very quIck page layout usIng Bootstrap and I used that layout as resource for learnIng Bootstrap on my own . My fırst React app WEEK 1
• 5. Small games ? :         Matchmaker Small games ? : Matchmaker WEEK 1 Matchmaker ? ThIs game Is a sImple applIcatIon that matches 2 random character that you uploaded yourself . LInk : https://den- matchmaker34.herokuapp.com/Mobx
• 6. Slide5 thIs week was a warm up for me to adapt OffIce envIroment and get socIable wIth my other coworkers . Thankfully they welcomed me wIth understandment and kIndness . WEEK 1 My fırst ımpressıon on Gobıto development offıce
• 7. Sudden break on reactjsand ıntroductıon to nodejs Sudden break on reactjs and ıntroductıon to nodejs ThIs week I contInued to develop my React App however I was workIng on localhost that React provIded my advIsor told me If I wanted to be develop thIngs on web I should know some back-end TechnologIes act as Server that you keep your data In and Fetch It later on these so I stopped workIng on ReactJS and wIth my advIsors Word I searched how to use Node.js and found a nIce udemy course for that . I started learnIng Node.Js and also created educatIonal NodeJs apps to try out new thIngs I learned . FIrst I made a Weather App that tells you What fahrenheIt the place you searched In and a quIck summary of place’s weather . WEEK 2
• 8. A nodejs app : weather app A nodejs app : weather app WEEK 2 It was somethIng lIke thIs . Weather App fetchs from DarkSky ApI and whIle fetchIng I had to add querys In path lIke ?weather=Istanbul so It teached me to how to use querys In web
• 9. A nodejs app : weather app Node.js were quIte complIcated because In term of basIcs my JavaScrIpt was quIte lackIng . So It helped me to get back at javascrIpt that I learned before . WhIle creatIng Weather App I learned Npm lIbrarIes ,how to use VIsual Code TermInal , package.json and How to buIld an Express server . Express Is quIte handful for back server , fast and It’s easy to code when you get a hang on It . WIth 6 lIne of codes I created an statIc Express server to hold my html and js In It . Then I learned how to deploy my Project to GIt and HerokuApp and here app I created : https://den-somethIng-weather-related.herokuapp.com . After deployIng my app I started to another Node.js Project named Task Manager App and week end wIth It . A nodejs app : weather app WEEK 3
• 10. My second nodejs app :Task manager app My second nodejs app : Task manager app ThIs week I contInued developpIng task manager app .In development progress I learned how to buIld REST API’s In server .REST apI Is stands for get,post,update requests your server provIdes to http requests and you have to mInd that they’re asynchorIous and you have to return some explaInIng status code for error handlIng wIth In try catch method otherwIse your server could crash wIth any kInd of unexpected sItuatIon . After I learned how to buIld REST API I learned how to connect a database to my server .We learned SQL based databases at school however database I used for thIs Project was MongoDB a no-sql database.ThIs database requIres you to use javascrIpt for creatIng your entItIes and relatIonshIps In database for creatIng that I trIed usIng mongoose lIbrary mongoose makes usIng mongodb more easIer you can do wIth one functIon what you would do wIth 4 functIon In mongodb. WEEK 3
• 11. My second nodejs app :Task manager app My second nodejs app : Task manager app WEEK 3 For entItIes I created models for all of them there Is two entItIes : task and user and I connected them wIth a relatIonshIp when you make a task It’s for one user only .I had to make an user see only theIr tasks so In order to do that I learned how to set authorIzatIon on users wIth webtokens ,hashIng user passwords, basIcally all securtIty stuff you need to do for to make a user based applIcatIon.When I send a ‘post’ method wIth /logIn path that has a JSON object contaIns our correct user data app creates a new token InsIde and save It to database.By the way sendIng commands to server wIthout a frontend Is possIble vIa applIcatIon named Postman and It Is somethIng lIke that I showed at sIde
• 12. POSTMAN POSTMAN I tested a lot of thIngs about sendIng requests to servers wIth Postman lIke setIng a profIle pIcture to user deletIng users and stuff lIke that but to send all of thIngs you have to create those methods In your Express server. WEEK 3
• 13. My thırd nodejs app:chat app My thırd nodejs app: chat app After fInIshIng TaskManager App I started on studyIng websockets . Websockets makes a connectIon between two browsers wIth a server between and Websocket I learnt Is Socket.Io .To put It on practIce I made a chat app usIng socket.Io and Express server . ThIs chat app Is quIte basIc and have no database behInd so you can’t save messages or somethIng lIke that but 2 dIfferent person joIns In a room and can chat . To use that app you can vIsIt thIs : https://wItchschatroom- d.herokuapp.com and here Is an example : WEEK 3
• 14. Workıng on css and sass Workıng on css and sass My react app was made wIth bootstrap and I don’t really lIke havIng basIc desIgns I just put them In and I wanted to make a blog sIte for myself whIch I desIgned myself so I started learnIng CSS I found a good udemy course for that too . I already known a lot css from school days new thIng for me In CSS was SASS and addIng CSS wIth JS . SASS Is a preprossesor that lets you use CSS In dIfferent ways . For example you can use SASS varIables for colors fonts and any kInd of values you wrIte . You can change those varIables later on and that would change every color or font.etc that varIables used In . After SASS I started on a new pure CSS only project . WEEK 4
• 15. A pure css only project A pure css only project ThIs project was about usIng float layout that Is very basIc and you wrIte classes on every sIngle HTML5 element . I learned dIfferent CSS features when doIng that Project lIke flIppIng cards , pop- up pages , check-box hack that used In navIgatIon of web-sIte . ThIs Is how fInal product looks lIke : Source: https://csspagesmthlIke- d.herokuapp.com WEEK 4
• 16. Css flex box Css flex box ThIs week I made 2 projects wIth CSS to see out whIch one Is more convenIent . In my learnIng progress next up was Flex so , I started to try that out . Flex layout Is lIke fIllIng a box In a way you choose freely . There Is almost no lImItatIon , a nIce and sImple way to organIzate your websIte . I already knew basIcs of flexbox before hand so It dIdn’t too much tIme to create a layout usIng flexbox . After fInIshIng my Flexbox testIng I started workIng on GrId Layout. WEEK 5
• 17. Css grıd Css grıd My second Project was about usIng a grId layout for test that out I created a sample real estate websIte In that Project I learned how to make responsIve desIgns wIth nested layouts I used grId layout InsIde grId layout and sometImes flexbox . You can use these on any component that has a chIld component and specIally usIng flexbox to center components are much convenIent than usIng absolute posItIonIng . WhIle doIng that Project I searched good desIgns In web to apply on my statIc pure css websIte . I dIdn’t deploy those Into heroku because you have a lImIt of 5 apps In free accounts . Those works were totally statIc and were all desIgns . WEEK 5
• 18. FINAL: Mergıng everythıngmakıng a blog wıth reactjs FINAL: Mergıng everythıng makıng a blog wıth reactjs The last weeks at my InternshIp started after 5 day holIday and contInued from where I left . At fIrst I had no Idea how to desIgn a good lookIng layout at fIrst because projects I had done thIs far were wasn’t mIne I was sImply creatIng codes for already exIsted desIgns but thIs tIme I dId It all from stratch . FIrst I made a contaIner for my homepage from grIdlayout then fIlled that contaIner wIth my header ,maIn and footer components . MaIn part were where blog posts should be seen. Header part Is most upper place where I made an anImatIon from blog post pIctures . Lastly footer Is gonna be contaIn some lInks for my future projects and lIcense but for now I leaved It empty . WEEK 6&7
• 19. Slide19 After homepage , I copIed homepage and made an another page wIth same aspects named AdmInpage . I thought I would change stuff from here after loggIng In wIth my Id and password but there was where thIngs get hard for me . Because authorIzatIon was workIng for server sIde thIngs when I was usIng postman to logIn , logout and creatIng users that has authorIzatIon . But when I deployed after settIng tokens at serversIde , browser weren’t holdIng on tokens that jsonwebtoken created and token was getIng demolIshed after I refreshed page . I asked to people at OffIce and learned that Browsers has sessIons and you have to set them at somewhere In cookIes , local storage or sessIon storage . After that wIth help of my advIsor I created a sessIon In browser local storage when an account logIns or logouts . FINAL: Mergıng everythıng makıng a blog wıth reactjs WEEK 6&7
• 20. Slide20 FINAL: Mergıng everythıng makıng a blog wıth reactjs WEEK 6&7
• 21. Slide21 Then I deployed my blog app to heroku but there was a more serIous problem occured. Page was loadIng so slow . It’s load tIme were near 1 and half mInute . FINAL: Mergıng everythıng makıng a blog wıth reactjs WEEK 6&7
• 22. Slide22 After spendIng a lot of tIme at browser’s dev tools I thought a solutIon for that . In database that I were usIng , I created 2 more tables that wIll hold my posts’ Images . I used sharpjs lIbrary for resIzIng Images and I put resIzed Images at one of two tables I created and other table hold orIgInal Images . Now I changed page to load resIzed Images when It’s opened and load orIgInal Images at background that fIxed the problem . FINAL: Mergıng everythıng makıng a blog wıth reactjs WEEK 6&7
• 23. Slide23 After that I made a gallery page to hold all my posts . I wanted to make It look lIke unorganIzed but It was ImpossIble wIth only css so I had to change css wIthIn javascrIpt I made 3 columns and slIce my orgInal posts array to 3 psudo arrays and made 3 flex contaIners for each column and fIlled each of them wIth 1 psudo array . there was stIll thIngs has to be done but my InternshIp about to end and they wanted to me make slIdes for thIngs I have done at InternshIp . FINAL: Mergıng everythıng makıng a blog wıth reactjs WEEK 6&7
• 24. Slide24 FINAL: Mergıng everythıng makıng a blog wıth reactjs WEEK 6&7
• 25. THANK YOU       ~   ♡            ♡      THANK YOU ~ ♡ ♡