Jr Front End Web Developer Portfolio Project - Get Hired
HTML-код
- Опубликовано: 2 июн 2024
- This my personal - DEPLOYED - REACT JS Jr front end web developer portfolio project that I want to share with you all. If you are wanting to get hired as a Jr developer then this is an excellent example of something you can build. Lot's of value in this build! React Hooks, Context, React-Router-Dom, useParams, Light/Dark Theme, Tailwind, Authentication, Firebase, API, Hosting and more!
Authenticate using firebase and firestore so we can save user specific data!
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
Thank you for watching.
Timestamps 👍
0:00 Intro
02:30 - Create React App
04:25 - Install Tailwind CSS
06:40 - Global Styles
08:00 - Dark Mode Styles
13:20 - Theme Context (Dark/Light Mode)
20:40 - Routes (React Router Dom)
23:10 - Navbar Component
51:40 - Coin Search
55:40 - API - Coin Gecko
01:11:20 - React Sparklines
01:30:56 - Trending Coins Component
01:43:28 - Coin Page
02:15:10 - Make Coin Page Dynamic
02:19:20 - Footer Component
02:29:45 - Sign In Page
02:38:01 - Sign Up Page
02:39:40 - Account Page
02:52:40 - Firebase Authentication
03:01:41 - Auth Context for Authentication & Firestore Database
03:48:01 - Protected Route (Must be signed in to see account page)
03:49:50 - 🚀 Deploy to web 🚀
🔥 Live Site 🔥
cryptobase-yt.web.app
Learn to code here!
edabit.com/?ref=clintbriley1
Github Repo 💻. (NOTE that if you clone this repo you will not have access to firebase unless you follow the steps at 02:52:40 since I have hidden my keys!!!)
github.com/fireclint/crypto-r...
⚡ Build a portfolio with NEXT JS ⚡
• Build a NEXT JS Portfo...
Support my coding habit 🤣
www.buymeacoffee.com/clintbriley
Connect with me on Instagram 💪
/ fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
#reactjs #frontenddeveloper #softwareengineer #javascript 
Наука
![KFF Singapore Badminton Open 2024 | He/Ren (CHN) vs. Alfian/Ardianto (INA) [7] | F](http://i.ytimg.com/vi/an7AykjOaAA/mqdefault.jpg)
(NOTE that if you clone this repo you will not have access to firebase unless you follow the steps at 02:52:40 since I have hidden my keys!!!)
I can't thankyou enough Clint. Loved following along. Your casual bro attitude is what made understanding ever the trickier parts easy. Thank you so much!
Thank you so much man!
Bro, you're too good. This content is gold to be free. God bless you. Once I land a job, I will clicking that Thanks button
Leslie! You’re awesome. Thank you for the support encouragement.
Any update on your job journey Leslie? Good luck!
Unbelievable 😆 I've been waiting for your new project so much and that's it. Thank you so much for your efforts 🤗
Thank you Natalya!
Just completed this project mate, it was awesome it improves my talwind css skills and state management in react, love your coding style and your deep voice, its look like university professor was teaching lol, i will figure out this project more by:
1- Adding show and hide password in account panel.
2- Adding the scroll-to-top every time page change and fixed the search crypto search bar until the bottom of 10th coin.
3- Add forget password bot ,so that user can recover there password if it forget.
4-Adding loading screen everytime pages render & pagination upto 25 pages.
5- Making a new page for trending coins too..
I know it will little bit tough for me but i will try out my best and updated it here, Love You Mann!
Great video, I really loved it ! this has helped me a lot in in learning react, tailwind and firebase!! Thank you very much for your efforts!! 😄
Thanks othmen!
Amazing as always!
thank you so much, I have been follow your 3-4 project.
I can tell by your atmosphere when you were finished a component or a component works, you are really enjoy about coding and teaching.
Thanks bob! Haha yah it's always fun when things work :)
bro,its insane,tnx for sharing this knowledge with us.
Nice work man! Also when we click on start to select a coin for our watch list, that star needs to stay the same, because when you go to account then go back to home that star is unselected
This has helped me so much in learning react, tailwind and firebase you have no idea. Thank you so much man!!
Glad it helped! Thank you my friend!
Thank you very much for your incredible tutorial, I learned a lot and I wanted to like it again on several times hahaha
That was amazing man. Keep up the good work
Thank you dude!
Unreal bro, loving the content!
Appreciate it dude - you are the man!
Dude, really i like your job, thanks you for your support!!
Thank you too!
You're a legend! Keep on the great work chief
Thank you sir!
awesome video which help me alot
thanks man, love it!
Thank you my friend!
Just finished this. Absolutely loved it! Really enjoying the profile projects. As someone looking for a junior web dev job this is perfect. Would love to see some AWS fullstack projects in the near future as I feel you'd be perfect to teach trickier concepts. Appreciate the efforts man!
Hi Sean! Thank you my friend. I actually just finished the AWS Cloud Practitioner course not too long ago. I've been thinking about diving a little deeper into AWS.
This is what I am looking for as well. 🙋♂️
@Sean Thomson Hi can i communicate with you? I am facing few problems to doing thins project. Need some help to fix it.
Can You please explain a bit theme context part? The code inside it is new to me
I really like your videos. They are always very informative and educative.
Thanks man!
Super Awesome!!! TQVM!!
Thank you!
You are crazy sir your course are fruitful so much love your work
Thanks a ton
Thanks so much, mate, for the way you give how to do very down-to-the-earth. 👍🇦🇺
Thank you my friend!
Omg!! Thanks you bro. I hope that this video will be teaching about several things.
I hope so too dude!
Just finished the project! awesome content bro
Thank you my friend!
Oh, it will be in my portfolio for sure. But first I'll do some simple firebase project.
Great project.
Unreal, can’t wait to start
You're the man!
Amazing video thanks man
Thank you my friend!
This one is amazing ❤️🔥
Awesome nitesh - thank you!
Thank you so much !
It is very good tutorial to practice
keep posting clone videos please they help much !
Thank you! 🙏
Great tutorial, for React, Firebase sdk9, Tailwindcss 3. Thanks realy great.
Thank you sir!
amazing work
Thank you!
This is great! When you are going through this build what are references are you using?
Clint, I want to say thank you so much for this great course! Top notch content! Completed many of your tutorials and they helped me plenty. Could you tell me what's the extension that lets you auto complete imports?
Keep up the good job man, You're my favorite youtube when it comes to this stuff!
I thought that came native! I’ll have to check what extensions I’m using.
@@codecommerce I've done some research and it's called Auto Complete by steoates
Great tutorial, can't wait to get started. Please can you make video on animation with react js and tailwimd css?
Thank you Victor - will do!
thank you very much NICE ( - ;
Awesome fam
Thank you dude!
ok, this clone was one of the best clones I've ever seen. I'm waiting for other videos. thanks
Thank you Molim
I love you man !
So awesome my dude!
HAHAH 1:28:59 loved the 'probably roasting me on the comments' great projects bro you are the best!
Haha thanks my dude!
u sir, are a true hero
Thank you dude!
A simple flex, flex col, justify between, to the parent container will push that footer down 💯
Thanks dude!
I'll build this now!
Host it and show it!
amazing project again
i sent you my portfolio
Thank you Joseph!
@@codecommerce you welcome you doing a great job all day
I’m done with my portfolio would love to have you see how it’s is now.
Applying for jobs already but I’m so scared of rejection.
wonder how long this project took for beginners learning web dev. To scared to say how long it took me since i feel like I spent to much time figuring it all out. great video, really liked how the tailwind css works.
You got it Jose, just focus on one thing at a time!
I'm here as always 😎
You're the man!!!
Hey thanks a lot can you make a project using RTK ? Your videos are amazing
Yes, soon
Very good React+Firebase+Firestore and darkmode project. I enjoy it so much. I followed and typed everything, and learn tailwind CSS more and more. Thank you so much, I definitely will follow your other projects videos and future videos. Learn efficiently and a lot. More important is I like your teaching style.
One quick question, when I start footer part (I am still on following this project now). In web console, it shows `[Violation] 'message' handler took 239ms` I am not sure what's that mean. Please let me know if anyone knows, thank you.
I’m not sure off the top of my head. I’d have to do a quick search
Finally finish this course, learn a lot, thank you. I got answer from my teacher about `[Violation] 'message' handler took 239ms` warning, because I was typing too slow...😅 Thank you, will start your other React project soon!
@@liuyan8066 🤣🤣🤣🤣
Hey man, thank you so much, this has helped me out a lot so far! But do you know how to fix cors errors for this? I am also using react and coingecko api in my app
You are likely getting the cors errors from overloading the api req. make sure you have your dependency array inside the useEffect for your api call!
@@codecommerce Thanks for replying!
Slight improvements. This should be done by viewers. Sort of like homework assignment.
1)When a user is logged in and opens the hamburger menu(nav menu on smaller screens). It still gives the options of the user signing up/sign in. Update this so that it only displays Home, Account and Logout options if a user is logged in.
2)This is still in regards to the mobile view (smaller screens). Its a bit repetitive to have the account /signout options in the main nav bar if those options are available after pressing the hamburger icon. once again this is only for mobile screen sizes. I completely removed it on only let it appear if you press the hamburger menu icon. I left it as is for the larger screen.
Hopefully this makes since. If you follow the video these 2 items are easily doable. Id like to think this was left out on purposely. We as developers should not only understand what he is teaching but to also handle doing things on our own to improve/add to user experience.
Eric - You just nailed it dude!! It's my goal to not just teach people how to do things, but try and teach people HOW to figure it out. Thank you!
Hi master ! Excellent tutorial. I follow your steps, the user is created correctly in firebase, I can create user and I can login with that user, but when I click on the cryptocurrency star I get error: Uncaught (in promise) FirebaseError: No document to update. How can I solve it ? Thanks in advance !!
Have you configured your cloud firestore in the firebase console?
I could understand createContext part and ThemeContext part. What should I do. Please guide
Bro amazing contentent,?can you explain the DOMPurify part...why we cant just call the info from de API directly?
Yes! So when we display the "description" from the API it returns the paragraph which has some "a" tags. It may load at first, but then can potentially present with an error. DOMPurify XSS sanitizer for HTML. This will prevent cross site scripting (XSS).
Please make video on animation based websites using react js and tailwind only 💞😅
yes
Exactly, you read my mind
It's coming!!
When I create the styling within className nothing happens. I worked around it by putting all styling in index.css. For example: className='md:hidden' doesn't make the element hidden unless I assign a name and apply style in the index CSS. Any reason why? Can't find the answer anywhere. Any help would be appreciated! Keep up the great work!!
Sounds like tailwind isn’t installed/configured correctly.
@@codecommerce Thanks so much man! i'll give it a shot! Have a great day!
Hey Clint, just going through this code-along project and unfortunately the theme toggle is not working as intended. I inspected the elements the class is toggling even the storage is working but the colors are not changing. What do you think could be the problem? I triple checked and the code is exactly the same. Thank you in advance.
Well scratch that. I forgot that I deleted index.css and did not import it again afterwards. Thanks for this build. really enjoying it.
All good!
Hi Clint when I use filter method it shows me this problem 😐-
Array.prototype.filter() expects a value to be returned at the end of arrow function array-callback-return
make sure you use the return keyword to return a value from a filter method
.filter((value) => {
if (searchText.toLowerCase() === "") {
return value;
} else {
return value.name.toLowerCase().includes(searchText);
}
})
when you add w-full to a jsx tag which is on the top of the hierarchy, is it the same as 100vw? how does it works?
So w-full is “width: 100%”. w-screen is “width: 100vw”
is it beginner friendly?
tailwind css is not working showing Unkown at rule @apply how to resolve it??
Great video, but the Sign Up page doesn't navigate anywhere. Even when i tried to navigate to the Sign In page it didn't work?
Do you have a GitHub, I’ll have a look!
@@codecommerce you mean if i've pushed it into my GitHub ? Cause i copyed the code it self from your repo 😄. So i guess it didn't work for you either ?. Cause you said in the video when u came to the Sign Up page and you said we'll take care of that later, but you forgot i guess . That's why i got stuck 😄
Halo, Mr. Clint. I'm following this tutorial but I got stuck that the react-sparklines not showing in my browser. What should I do for solving this issues, please? Thank you🙏
Hey dude! Are you getting any errors?
@@codecommerce yes, master. But I just continuing your videos the error’s gone. Thankfully 😅🙏🏼
@@chaerulumam7712 how did u fix the error?
@@liftoach3535 Just continuing the videos mate
After deploying the website the sign in is not working...
I have tried with ur link as well..but its not working
What to do now?
What error are you receiving?
@@codecommerce when i m filling details and pressing sign in button , nothing is happening
I tried same in your deployed website...
Same problem there also.
@@codecommerce sir please tell how to make it work , i was building it as my project and now i am stuck there...
Pls visit your link and check for sign in,it is not responding...
Please make on video MERN stack development 😅
Everybody loves MERN!
Followed exactly up to 30:00 and the dark/light toggle not working...as if the :root @apply is nor working
having issues getting tailwind to work. Followed steps exactly is there any issue with this currently
Perhaps you missed a small step? Are you getting an error?
@@codecommerce Yeah I'm a bit inexperienced with Tailwind, so I started project over and now it works, so I'm not sure what the error was lol. Thank you for your response much appreciated. Your videos are awesome and so helpful to me- thank you for all you do 👍
awesome project but the coingecko is very slow in giving response now
Hate to hear that. May be a lot of users.
Is this project still worth starting with coingecko being slow?
What a great project, but for some reason, Firebase storage was not working for me at all.
We’re you getting an error?
@@codecommerce For some reason nothing was happening in the Firebase, like it was not connected at all, but anyway, I will try again. Can you create a project with lots of filtering for the items, like e-commerce sites have? Thanks!
I have a similar problem. But the thing is that is occurring only with the array of saved coins. The user data is being saved correctly, the coins are not. I have 100-checked the code and is still not working.
Have you fixed it already?
Did anyone figure out how to keep the stars highlighted once you come back out of the Account page?
hey, is the API working ?
yep@@ninithealchemist
and about 2 weeks later, bitcoin is down to $18.845 for the 24h low by the time i'm doing this project !!! almost cut in half compared to what appears on your screen ...
Duchailu, I know - isn't that crazy! I hope everyone is either holding or buying! *Not financial advice 🙂
@@codecommerce well i've had bad experiences in the past, so now i'm way more careful with how i spend my money !!! btw i'm learning so much with this video, this is really nice, i've already done react/firebase backend before, but that was with firebase 8 and react router 5, so i'm getting quite a lot from this !! one thing though, i really love tailwind css, i only knew bootstrap before this project, so i'd really like to find a small project right after this to practice tailwind css by myself, but i don't know how i could do that, any idea would be welcome ...
I got a question to ask
sir
Yez
Hello sir, please make a video. How to use react js push notifications with firebase.
Ok that's a good idea!
the api is not free now ....
it is just go check through the documentation
Thanks man- I was bummed when I first read that. Hopefully it’s still free.
Can you make a video implementing password less authentication in firebase please?
Are you referring to MFA?
@@codecommerce No just an email link to confirm the email. When a user clicks the link they are signed in
API is not free now
Dang really?? Not even with limited calls?
@@codecommerce no, so make some videos with free api
Is this project still possible to complete for free?
Whenever i signup for the first time it doesnt redirect to the account page despite the:
try {
await signIn(email, password);
navigate('/account')
it does work when i do it from sign in tho, anyone knows how to fix this?
awesome project btw
Do you have a GitHub?
Hello, very great app !
However, i have a little issue with Sparklines, i have been trying to fix it for like 2 hours now and I still can't figure out how
This is part of the error message in the console:
ERROR in ./node_modules/react-sparklines/src/Sparklines.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\ilias\crypto-project
ode_modules
eact-sparklines\src\Sparklines.js: Support for the experimental syntax 'jsx' isn't currently enabled (54:13):
52 |
53 | return (
> 54 |
| ^
55 | {
56 | React.Children.map(this.props.children, function(child) {
57 | return React.cloneElement(child, { data, points, width, height, margin });
Could you please help me out ?
I get this error when i try to host and deploy to web: Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
code:
firebase.js -> apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
.env -> REACT_APP_FIREBASE_API_KEY=MyApiKey is here.
works perfectly on localhost.
Any clue how to fix that?
Thx for everything man! Easy sub!
Uncaught TypeError: coins.filter is not a function.
The above error occurred in the CoinSearch Component.
I exactly copy your code but error is shown. Please solve this error.
Yes exactly same error shown in my code, code commerce solve this problem.
I also got the same error. Anyone solve this error.
Are you making the call properly? Are you getting a response at all?
@@codecommerce I exactly copy your code, everything is perfect but this error shown
@@codecommerce yes sir I am making proper call,i also published this issue in your GitHub repo kindly checkout this.
God's Workk @clintt
Thank you my friend
my firebase authentication is not working can you please make a video on authentication or help me and message me at insta
This may be a bit easier - ruclips.net/video/x62aBvnRCKw/видео.html
Hey man, great video. I just have a question, do you think of all the styles before starting the project, because I am unable to imagine the project so far ahead in the future so as to define all the styles beforehand.
That is a good question! I too struggle with this. I do a combination of things.. Usually as I build it I just kind of piece it together with what I think fits. Definitely get a lot of inspiration from other sites/designs!