Stats: 3,190,109 members, 7,939,480 topics. Date: Wednesday, 04 September 2024 at 06:41 AM |
Nairaland Forum / Science/Technology / Programming / 30 Days Of Code {April 19 - May 18} (2590 Views)
What's The Best Piece Of Code Ever Written By You? / My First {100 Days Of Code-challenge } April 17 - July 25 / 100 Days Of Code Challenge (2) (3) (4)
30 Days Of Code {April 19 - May 18} by kolalekan(m): 1:06am On Apr 19, 2019 |
Inspired by codemind101 I want to go on a personal #30daysofcode to learn ReactJs and Nodejs up to a level where I can get a job and hopefully with nairalanders. I am still a student and would try to update my progress daily. Let's start All of my work would be pushed to https://github.com/kolalekan |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 1:25am On Apr 19, 2019 |
I have been trying to wriggle myself around node and can create apis up to a certain level Day 1: I am just getting started with react and currently working on a project myreads I am reading data from an api (not created by me) and it shows a list of books, which are in 3 different categories each (currently reading, want to read, none). I should be able to switch between each of the categories for a particular book while the categories of the books remain the same after I visit next time. I should be able to search for a particular book using search strings and the state of the categories would still remain the same For example, I have many books in the collection, I am able to change the category of a particular book - "Introduction to SEO" from none to want to read When I visit next time, the category ought to still remain as want to read (via the api). I can decide to search for the particular book "Introduction to SEO" and still see the category of the book marked as want to read I hope I can get this done within the time frame, the whole project would reside on https://github.com/kolalekan/myreads |
Re: 30 Days Of Code {April 19 - May 18} by 3KINGZ18: 6:55am On Apr 19, 2019 |
Following |
Re: 30 Days Of Code {April 19 - May 18} by Nobody: 7:44am On Apr 19, 2019 |
wao great one bro following we will be ur accountability partner. |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 3:12am On Apr 20, 2019 |
![]() I have been trying to make sure to learn Responsive Design because I have been too over reliant on Bootstrap to help me get basic stuffs done I decided to go with Flexbox not knowing what was coming for me Based on things I read about having a mobile first approach, I started with mobile. I was able to learn how to use flexbox and mediaQuery to get me a favorable design for most of the screen sizes ![]() I also created my Book/Books component which made my work even easier and suitable for reuse Fetching data from the api now and rendering the data well I also tried implementing the dropdown of the react-select dropdown which gave me many problems. Boy I saw trouble and eventually I googled the problem and realized I was using the package wrongly ![]() Na smalls sha, I am learning bit by bit, glad about that All the new changes can be found on https://github.com/kolalekan/myreads Looking to learn even more stuffs today --abeg ignore the Volvo in the screenshot biko
|
Re: 30 Days Of Code {April 19 - May 18} by Nobody: 4:04am On Apr 20, 2019 |
kolalekan:What API are u using? Want to build a similar project |
Re: 30 Days Of Code {April 19 - May 18} by Nobody: 4:05am On Apr 20, 2019 |
Codemind isn't updating his thread. I'm watching him....but I don't think he knows |
Re: 30 Days Of Code {April 19 - May 18} by Olalekank(m): 8:23am On Apr 20, 2019 |
modestbrowser:https://github.com/kolalekan/myreads/blob/master/src/utils/booksAPI.js You can check this link, it's on the first lkne |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 7:55pm On Apr 20, 2019 |
Day 2 I continued work on the project, experienced quite a number of problems in trying to hold the states of each of the books. I was also able to send data from my child component (Book.js) back to the parent component (App.js). I have been able to build the dropdown successfully and I have my state containing all the books changing when I change the value of the dropdown. I also tweaked one or two things in the design to make it look better. By tomorrow, I would have been able to make sure that a change in the dropdown would cause an effect in the page rendering the data (the backbone for this has been established in my book state) I would also have the search function working totally I thought I knew javascript but javascript showed me pepper, me self pour pepper for the eye of javascript. Lots of new functions learnt Within these two days of starting this project, I have been able to see the entire beauty of react, I just get some sort of flexibility that makes me play around with all the data and render it as I want. It also helps to break your styling and you can easily make changes to the styles. Good job from Facebook Changes can be found on https://github.com/kolalekan/myreads/
|
Re: 30 Days Of Code {April 19 - May 18} by Nobody: 9:11pm On Apr 20, 2019 |
I'll start this project with Node.js and bootstrap 2moro 1 Like |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 11:15pm On Apr 21, 2019 |
Phew! Day 3 is here already, choi I intended to finish what I was working on today and yes, I am about 95% with implementing most of the features I am working on I have been able to successfully manage the state across the applications and components. I also learnt how to make use of React-router (Router and Link components) and implemented it in navigating to the search page. The search page works now and I can change the category of a particular book and still have it changed on the main page ![]() There is still a bug I have been trying to look at on the search page though, I'd appreciate professional help On the main page, when I change the categories, it automatically gets added to the section allocated for the category and gets removed when I change the category, enough of the story, I'd share a gif of everything I have been getting to say It has given me lots of problems and I have been able to grasp so much javascript within this short time I am loving this react so much, it has so much resemblance with flutter (but unfortunately I cannot write flutter currently due to laptop issues) I am looking at learning redux next as I am following a tutorial series, I'd keep updating everyone on the redux and share whatever I learn I'd also love any project anyone can give me, just something to bolster up my skills while applying redux to it All recent changes can be found on the repository -I'd be sharing the gif tomorrow as I cannot generate it right now |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 8:44am On Apr 22, 2019 |
Please does anyone have an idea of a react project I can undertake? |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 2:07pm On Apr 22, 2019 |
kolalekan: A real time dashboard. Got the idea while watching Bloomberg. I also want to build it before this month runs out |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 3:01pm On Apr 22, 2019 |
4dor: Can you shed more light on it, I am like 70% done on a currency converter app and may come up with a real time weather app that updates How do you want to fetch the data real time? Thank you |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 3:11pm On Apr 22, 2019 |
kolalekan: A real time weather update sounds like it but I hope to build one for currency/stock price. I have two ideas for fetching data in real time 1. Plugging Ajax into componentDidMount 2. Socket.io I might end up using socket.io |
Re: 30 Days Of Code {April 19 - May 18} by Olalekank(m): 3:37pm On Apr 22, 2019 |
4dor:Sounds nice, might end up using socket.io I thought the componentDidMount is called only once in the particular component? Also, I'm experiencing a bug in my search If I wanna search for "the house" When I type t, it brings out all the items in the array When I type th, it brings out all the items with t When I type the, it brings out all the items with th I tried doing setState in my render method and it gave me errors. Do you have any idea how I can solve this? |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 3:58pm On Apr 22, 2019 |
Olalekank: Yes...that's where Ajax comes in to do the dirty job. I'll use Socket to avoid any headache. How can I get access to the code? Sounds like a problem with "value" .I'll need to see the code to be sure |
Re: 30 Days Of Code {April 19 - May 18} by Olalekank(m): 4:25pm On Apr 22, 2019 |
4dor:That's the problem I'm having exactly Please check https://github.com/kolalekan/myreads/ Inside the components/books/book.js file |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 5:00pm On Apr 22, 2019 |
Olalekank: I'll check it before I go to bed |
Re: 30 Days Of Code {April 19 - May 18} by Olalekank(m): 5:13pm On Apr 22, 2019 |
4dor:Thanks, please check the action here https://myreads-olalelakn.herokuapp.com I'm not done with adding styles but that should be fixed soon |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 6:56pm On Apr 22, 2019 |
Olalekank: You might need to check this again. Site is blank. |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 7:08pm On Apr 22, 2019 |
4dor: I am sorry I changed the address as there was a mistake in the url Here is the new URL : https://myreads-olalekan.herokuapp.com/ Thank you 1 Like |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 8:31pm On Apr 22, 2019 |
Okay, so this is day 4, learnt more about using fetch api and working better with states, I started a currency converter app this evening and I was able complete it I'd love for someone to help me review and tell me things I can improve on and correct to get a better experience Here is the link to the live/working version I'd finally start learning redux tomorrow and hope to implement it in a even more complex app Here is a link to the currency converter https://currency-convater.herokuapp.com/ 1 Like |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 9:11pm On Apr 22, 2019 |
Olalekank: After looking at your code for some minutes, I think the real problem is in the Search Component (changeInput method and the stuff you are rendering). You might what to rewrite it. Check the SO example below https://stackoverflow.com/questions/51726391/how-to-create-a-search-field-in-reactjs 1 Like |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 9:14pm On Apr 22, 2019 |
I know its early days but you might want to read up on how to structure your components. You'll see some tips on the official React site 3 Likes |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 9:58pm On Apr 22, 2019 |
4dor: Thank you for that, please do you have a specific link on how to get this in the correct structure? Also I'd like to send you a PM, are you fine by that? |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 11:10pm On Apr 22, 2019 |
kolalekan: https://reactjs.org/docs/thinking-in-react.html Is the number in your signature registered on Whatsapp? If yes I'll send you a message. 1 Like |
Re: 30 Days Of Code {April 19 - May 18} by Olalekank(m): 11:46pm On Apr 22, 2019 |
4dor:Thanks I don't use it for WhatsApp again Can you drop your number? BTW, I'm the one being the two monickers |
Re: 30 Days Of Code {April 19 - May 18} by 4dor: 7:57am On Apr 23, 2019 |
Olalekank: I've replied your PM |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 7:55am On Apr 25, 2019 |
OMG, how bad of me I failed to update for 2 consecutive days. School has had its own part in taking my time. Day 5 AND 6 However I talked extensively with 4dor and he gave me priceless advice. In part of the 30 days of code, he gave me a list of topics to actually study (which I have not started covering). In addition to the advice and list of topics he gave me, he also sent me a book on "Data Structures and Algorithms using javascript" written by Sammie Bae. I learnt about the Big O notation better (and still looking for extra resource to learn Master Theorem for calculating the time complexity of recursive functions), using recursions and setting a base condition to prevent you from going to stack overflow (pun intended), some javascript refreshers on arrays and strings, some memory management techniques. These are some of the topics that are covered before entering into the popular data structures and various searching, sorting algorithms. Back to life, I finished up with the currency converter (though still need a few touches) Following the tutorial series I have been using, we started redux and I have been trying to wrap my head around this redux of a thing. Having a central store and making the state of our app predictive. They are teaching it this way - Redux alone - Redux + UI (HTML and javascript) - Redux + React Today, I'd be covering a couple of things - Sets as well as the Searching and Sorting * Algorithm category - Redux alone and Redux + UI |
Re: 30 Days Of Code {April 19 - May 18} by afuye(m): 10:17am On Apr 25, 2019 |
I am impressed. if you are around lagos i will help you with 4 free video courses on data structure on algorithms from colt steel and andrea Noriega and advanced javascript concepts from udemy kolalekan: |
Re: 30 Days Of Code {April 19 - May 18} by kolalekan(m): 6:14pm On Apr 25, 2019 |
afuye:Thank you! I am in Lagos |
Interswitch Webpay - Payment Gateway / Bank Plus Core Banking Software/web App In Nigeria / Lean How To Hack
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 67 |