Build a Job Portal Website: ReactJs, Tailwind CSS & Firebase

Join the Community → www.jsanytime.com/community/
Ready to create your own job portal website? Watch this step-by-step tutorial and build a fully functional job portal from scratch using the power of ReactJs, Tailwind CSS, and Firebase Firestore!
You will learn how to setup a React project with Vite, crafting a stunning user interface with Tailwind CSS, usage of state and props in React, creating a Firebase project and connecting it to your React app, building a dynamic job listing system, storing job data in Firebase Firestore , Real-time updates using Firebase Firestore. And much more!
Read More About Spread Operator: developer.mozilla.org/en-US/d...
Want full source code of the project? Drop a link in the comments!
► Install React with Vite : vitejs.dev/guide/
► Install Tailwind CSS in Vite Project : tailwindcss.com/docs/guides/vite
► Install dayjs : day.js.org/docs/en/installati...
► Gradient Background : hypercolor.dev/
#onlinejobportal #reactjs #webdevelopment #reactjsproject
=========================================
⏱ Timestamps:
(00:00) Intro
(00:35) Project Overview
(01:57) Install React with Vite
(03:01) Install Tailwind CSS
(05:31) Project Setup
(07:03) Navbar
(09:15) Header Section
(11:11) Search Bar
(15:02) Job Card
(27:19) Fetching data from a dummy js file and using props
(35:35) Why to use a database?
(36:49) Setting up Firebase Firestore
(40:20) Adding data to the database
(43:48) Fetching data from database
(53:00) Ordering the data fetched
(54:57) Custom fetching of data from the database
(01:04:55) Applying Clear Filter Option
(01:08:23) Outro
► Follow on Github to get latest source code of projects: github.com/EtishaGarg
► For more content like this, subscribe to my channel: / etishagarg
► Support me to make more such videos
Patreon: / etishagarg
► Follow Me On Social Media
LinkedIn: / etisha-garg
Twitter: / gargetisha
Instagram: / gargetisha
► For business inquiries, reach us on: [e-mail]

[@EtishaGarg]

Full Source Code of the Project: github.com/EtishaGarg/online-job-portal

[@somilagarwal8591]

Thankuh, So much ma'am for this wonderful project , PLEASE ma'am we need more Projects on React and Tailwind CSS like this..

[@HistoryHouse45]

Thankyou it was easy to follow along

[@opencode1]

[@vinayprajapati2276]

Thankyou for this project it help me to learn a lot I request you to make a video on complete e-commerce website with functionality like product filtering, search , add to cart , etc

[@Nashir-rm6sn]

Great job mam, It's really help to learn and think about something new 😀😀😀

[@midlajahmad-cs0058]

really informative and explained well...

[@MamunurRoshid93]

this is awesome project

[@shamimanasrin6243]

In my code the filters are not rendering any data. I consoled the req variable you used, and saw i am not getting any data there, but i dont have any error either. Can you give me any suggestions about what is going wrong here? Thanks in advance.

[@Nidhi-di3xm]

have you used any api or json file for database ? like is it only 5 or 6 data in this? or is there a large dataset?

[@jeevanpanwar1993]

thank you

[@aditya-d-]

Mam there is plugin for react that auto import the components

[@_RagavanS]

Thank a lot

[@vishwateja9923]

mam after adding components in src it is showing emphasized items can u explain what it means can u give some solution for it

[@Mr.akki_990]

anyone tell me can i use this frontend with spring boot as backend

[@__98130]

I did everything in the same manner but my code didn't run there were lots of error in the starting only

[@karthikraj9394]

the select drop down is not styled properly after applying class its not getting styled like in your video

[@uwais8133]

thank you for this project, this is awesome but please help me, index.jsx:21 Uncaught (in promise) ReferenceError: props is not defined at search (index.jsx:21:5) ?

[@aditya-d-]

mam thank u

[@vansh.vardhanjha]

At 7:40 you should have told that you are using an extension called E7S + React. I tried rfce and got reflect.

[@AshrafAli-vi5kp]

😝

[@rajuyggfub]

Madam apka koi jab laga ya nehi please bataye 🙏🙏🙏🙏🙏

[@zerubabelfilmon3300]

It is showing this error - 'Internal server error: Failed to resolve import "./firebase.config" from "src\App.jsx" because './firebase.config' doesn't exist.

[@EtishaGarg]

You can connect with me and fellow web developers on the JS Anytime community and share your issue there and surely you will get your query resolved. Link to join the Community → www.jsanytime.com/community/

[@harshitnegi05]

Heyy etisha, From where you learn reactjs❤

[@Closet_By_D]

hey it just h small set of mern video can you make a much better with lots of featurs and link options i like your explanation like portfolio

[@umairbashir3875]

Hi mam..I hop you're doig well..mam im following your reactjs series and projects..Here in this project im facing the issue while searching custom jobs..when i click on search button it through this error please help me i have tried my best but in vain: Uncaught (in promise) FirebaseError: Function where() called with invalid data. Unsupported field value: undefined

[@umairbashir3875]

const search = async() => { await props.fetchJobsCustom(jobCriteria); } through eror on this function

[@chinmayjain9705]

it's all about props.

[@kmsrealestate-vizag6816]

Hi.. I started following your tutorials they are really very helpful.. I need to know how to create a simple website and host or export it to cpanel like GoDaddy or hostgator..

[@EtishaGarg]

Will surely make a video on that soon

[@ArchitBatham]

Please, mama, we are working on a major project on the job portal, and we have taken a reference from your video and made it the same way you taught us. You have given us an idea for how to make a job posting, so might you be able to give us some advice on that?

[@EtishaGarg]

Sure. You can write an email to me at [e-mail] with your queries.

[@d-muhammadfakhrifakhruddin2767]

Warning: Each child in a list should have a unique "key" prop. i have this error when apllying the filter, can u help me?

[@amaanpathan368]

error solve hua kya bro

[@madhavbiradar2029]

Mam search is not working can you plz help me

[@amaanpathan368]

this error are solve now..?

[@iamkriti1]

i need the code

[@freak127]

Search functionality not working, after filtering the job no data is shown, could you please provide the source code?

[@anishpokhrel7280]

yeah same problem is occouring for me too. i am looking forward for the source code of her but , i think it isnt available right now

[@EtishaGarg]

Source code is now available on Github : github.com/EtishaGarg

[@adwaithsn6306]

Is this both front end ank backend! Please let me know🥲

[@AvikNayak_]

Hey, have you completed it? Is it working?

[@AshrafAli-vi5kp]

Is this Responsive?

[@sanjayshah-fn2zf]

Source code please

[@EtishaGarg]

github.com/EtishaGarg/online-job-portal

[@aditya-d-]

In date is not show how convert - _Timestamp nanoseconds: 709000000 seconds: 1698777000

[@sanketgawande3667]

let date = new Date() let millisecs = date.getTime() const formatted_date = date.toLocaleString('en-in' , {dateStyle : 'full | long | short | medium" , timeStyle : 'full | long | medium | short'}) let date _from_millisecs = new Date(millisecs).toLocaleString('en-in' , {dateStyle : 'full | long | short | medium" , timeStyle : 'full | long | medium | short'})

[@amanbhojak8281]

index.jsx src\components\JobCard * 'postedOn' is missing in props validation eslint(react/prop-types) [Ln 10, Col 41] 'title' is missing in props validation eslint(react/prop-types) [Ln 16, Col 70] 'company' is missing in props validation eslint(react/prop-types) [Ln 16, Col 86] 'type' is missing in props validation eslint(react/prop-types) [Ln 17, Col 35] 'experience' is missing in props validation eslint(react/prop-types). [Ln 17, Col 57] SX 3 config.js myData.js 'location' is missing in props validation eslint(react/prop-types) [Ln 17, Col 85] 'skills' is missing in props validation eslint(react/prop-types) [Ln 19, Col 36] 'skills.map' is missing in props validation eslint(react/prop-types) [Ln 19, Col 43] 'job_link' is missing in props validation eslint(react/prop-types) [Ln 27, Col 42] index.jsx src\components\SearchBar 3 'React' is defined but never used. eslint(no-unused-vars) [Ln 1, Col 8] 'props' is not defined. eslint(no-undef) [Ln 30, Col 18] 'fetchJobsCustom' is missing in props validation eslint(react/prop-types) [Ln 30, Col 24

[@amanbhojak8281]

Can someone help me

[@EtishaGarg]

I think you have installed ESLint VS code extension that is causing this issue. Try disabling that and then try.

[@amanbhojak8281]

@@EtishaGarg yes mam but when click on search it is not showing the filtered data when i click on search no job card

[@freak127]

@@amanbhojak8281 same with me