Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucky-kashyap/full-stack-web-dev
full stack web dev challenge 75 days
https://github.com/lucky-kashyap/full-stack-web-dev
bootstrap css css-flexbox ejs expressjs html javascript mern-stack mongodb node-js react-js
Last synced: about 2 months ago
JSON representation
full stack web dev challenge 75 days
- Host: GitHub
- URL: https://github.com/lucky-kashyap/full-stack-web-dev
- Owner: Lucky-Kashyap
- Created: 2023-10-04T17:08:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-07T15:30:42.000Z (5 months ago)
- Last Synced: 2024-08-07T18:41:10.302Z (5 months ago)
- Topics: bootstrap, css, css-flexbox, ejs, expressjs, html, javascript, mern-stack, mongodb, node-js, react-js
- Language: HTML
- Homepage:
- Size: 74.4 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# full-stack-web-dev
take challenge #75 days to complete full stack web dev
### Started with FrontEnd Journey
Learn HTML , CSS & JavaScript
HTML:
Basic tags , formatting tags , semantic elements.
CSS :
Learn Basics of CSS:
How to do Styling in an element
Developer Projects:
Landing page :
Project 1: Urban Women Wear
Project 2: Peanut butter get silvs (Inspiration) [[https://getsilvs.webflow.io/]]
Project 3: Simple Landing Page
Project 4: Block Practice
Project 5: Fashion Arrival From (Adobe XD) Design
Project 6: Maria Michno From (Adobe XD) Design
Project 7: Apna College Website Landing Page [[https://www.apnacollege.in/course/delta]]
Project 8: Blog Post
Project 9: Microsoft UI Design (Home Page clone) [[https://www.microsoft.com/en-in/]]
Project 10: Pentaclay (Home Page) [[https://pentaclay.com/]]
Project 11: Vmake Fashion Model (Complete Home page with CSS Effects) [[https://vmake.ai/?utm_source=dribbble_designer09]]
Project 12: School UI (Figma Design) [[https://www.figma.com/file/sfmVzdPgFIWblLk3qzRdL1/Railway-school-ui?node-id=736%3A1418&mode=dev]]
Project 13: SpiderMan UI (Figma Design) [[https://www.figma.com/file/ypa9bzTvujICcbDbD8vDFb/test-(Copy)?type=design&node-id=0-1&mode=design&t=NBKJVyzpQBPd0h0Z-0]]
Visit Link : [[https://spiderman-landing-page.netlify.app/]]
Project 14: Landing Page [[https://thisisdigital.co.uk/]]
Project 15: Login Form Using Tailwind CSS
- Build Login Form Using Tailwind CSS
Project ShowCase :
## Tailwind CSS:
- Class Based Styling
- Utility CSS Library
- Utility first-CSS-FrameWork
- Customization Also possible
- via CDN
- Use Post CSS to use tailwind
- generate package.json via
npm init -y
- Install via these commands
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
- style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
- install vite
npm i vite
- in package.json
"dev":"vite"
- to run project
npm run dev
- It will start the project on localhost
## Tailwind CSS Customization:
- Customized tailwind.config.js file
- give customized color
- background color according to our need
- many things we can customize
- How we can make our custom value
fontSize: {
"10xl": "10rem",
},
- customize text-10xl
theme: {
colors: {
// pink: "#ffc0cb",
// red: "#56f543",
// red: {
// 99: "#56f543",
// },
blue: {
100: "#1fb6ff",
200: "#1fb6ff",
390: "#1fb6ff",
600: "#1fb6ff",
},
purple: "#7e5bef",
pink: "#ff49db",
orange: "#ff7849",
green: "#13ce66",
yellow: "#ffc82c",
"gray-dark": "#273444",
gray: "#8492a6",
"gray-light": "#d3dce6",
},
extend: {
fontSize: {
"10xl": "5rem",
},
fontWeight: {
xl: 900,
},
screens: {
hello: { min: "640px", max: "767px" },
},
},
## Project Using Tailwind CSS (Paytm Clone):
- SetUp files for building paytm Clone
- Use tailwind utility classes to power up project
- Completed Paytm Clone Using Tailwind CSS (Build)
#### Project Showcase :
## Project Using Tailwind CSS (Zeplin Extensions)
- Take reference from [[https://extensions.zeplin.io/]]
- Use Customzation to set the UI
- In tailwind.config.js set own colors and shadow of an element
- Zeplin Config & Class generator
- This tool makes it easy to generate Tailwind CSS configurations. A well-organized workspace where developers and designers can come together to collaborate to create and deploy products. This tool generates snippets of code from designers made by designers.
#### Project Showcase :
## Learning Bootstrap (v5) :
- Bootstrap Installation (Using CDN)
### Basic Intro about Bootstrap
- Bootstrap Typography
- we can write classes according to our text size we want (h1,h2,h3,h4,h5,h6) these are classes for text size
- Display Heading
- Lead Text and Alignment
- Text decoration & font-weight
- Text Colors
- BG Colors
- Buttons
- Button sizes
- Outlined Style
- Button Groups
- Links as buttons
- Utilities classees
- Margin and padding it goes from 0 to 5
- Borders
- Box Shadow
- Font weight
### More Classes
#### Container Classes:
- Container
- Container Fluid
- Container Small
- Container Medium
- Container Large
- Container Extra Large
#### Bootstrap Navigation:
- Use Navigation of bootstrap
- Responsive
#### Bootstrap Cards:
- Use card class to make Bootstrap Card
- Use image title description and a beautiful button
## Card Design:
#### Bootstrap Carousel:
- Use Bootstrap Slider for sliding images
- We can customize it whenever we need
- Auto Slide
- Carouel Slider Buttons
- Carousel Indicators
- Carousel Caption
#### Bootstrap Modal:
- Button trigger modal
- Modal Header , Modal Body , Modal Footer
#### Bootstrap Dropdown:
- we can modiy dropdown button and add dropdown links according to our need
- Example single danger button with Dropdown Menu
- Example split danger button with Dropdown Menu
#### Bootstrap Popover:
- we can show small popup/dialog with next to element
- we can set its position also
#### Bootstrap ScrollSpy:
- we can use this when we have large text and we want to move over that text
#### Bootstrap Pagination:
- we can set size, disable, pagination icons
- we can also set its alignment
## Started with JavaScript:
Learn Basics of programming
Build small-small projects
Project 1: Bulb on off
Project 2: Event Timer
Project 3: Modal
Project 4: Login-signup
🚀 [GAMECHANGER ] Create Modern Landing Page with HTML CSS JS | Shery.js Launch 🌟
- UI Created.
- Use Shery JS to add animation
- Follow Shery JS Github and apply Shery JS in Application
Shery.imageEffect(element,configurations)
Project ShowCase :
Move to React JS Library:
Learn Basics of react-js
- How react works.
- About components.
- Rendering.
- Types of components.
- state variables
- react Hooks.
- Event Handling
- context API
Implement all these learning inside project:
Project 1: Bharat clock APP v1
Features:
- show date & time
- using Date method
Updated Version v2:
Use React Hooks: to calculate correct date & time , with time clear it
const [timer, setTimer] = useState(new Date());
useEffect(() => {
const intervalId = setInterval(() => {
setTimer(new Date());
}, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
Project ShowCase :
Project 2: Calculator APP
Features:
- create input box
- create different types of buttons of calculator UI
- implement functionality to calculate things
- use functions
Project ShowCase :
Visit Link : [[https://calculator-app-v.netlify.app/]]
Project 3: Todo APP
Features:
- create two input boxes (item & date)
- add items to todo
- remove item from todo
Project ShowCase :
Project 4: Social Media APP
Features:
- create UI with Bootstrap
- use context API for managing posts
- ADD Post
- Delete Post
- Use API to add post & delete post (Dummy JSON API)
Project ShowCase :
Project 5: Food-App (Search by input & Category Wise Filter)
Features:
- Use server for data
- implement search functionality
- filter food items via category buttons
Project ShowCase :
Design Link : [[https://www.figma.com/file/rephrU2FVgN8MFz6XhnP51/Learn-React-with-10-Projects?node-id=342%3A52&mode=dev]]
Project 6: Mini-Docs-App
Features:
- Use Tailwind CSS for UI.
- Quick practice of react components
- Use array of object & map through it with dynamic data
- create Foreground, Background & Card component
- Use react icons library to use icons in docs app
- also use Framer motion library to move card here & there according to drag values (motion)
Project ShowCase :
Project 7: Tic-Tac-Toe Game
Feature:
- Use board logic for checking 1 2 3 4 5 6 7 8 9
- Use react icons for display cross & zero
- Use html css for UI structure
- Add event listener on each card and check whether wins or not
function isWinner(board, symbol) {
if (board[0] === board[1] && board[1] === board[2] && board[2] === symbol)
return symbol;
if (board[3] === board[4] && board[4] === board[5] && board[5] === symbol)
return symbol;
if (board[6] === board[7] && board[7] === board[8] && board[8] === symbol)
return symbol;
if (board[0] === board[3] && board[3] === board[6] && board[6] === symbol)
return symbol;
if (board[1] === board[4] && board[4] === board[7] && board[7] === symbol)
return symbol;
if (board[2] === board[5] && board[5] === board[8] && board[8] === symbol)
return symbol;
if (board[0] === board[4] && board[4] === board[8] && board[4] === symbol)
return symbol;
if (board[2] === board[4] && board[4] === board[6] && board[4] === symbol)
return symbol;
return "";
}
export default isWinner;
Project ShowCase :
Project 8: React-Image-Slider
Features:
- Implement carousel functionality.
- Slide Images using react-slick
npm install react-slick slick-carousel
- Use Images inside Slider component to implement functionality & config settings of slick to use it
Project ShowCase :
Project 9: React Multi Language Support Application
Features:
- Use i18 Next technology for knowing the current language and change it accordingly
- Give interalization language feature to the app
Project ShowCase :
Project 10 (Dark/Light Mode) :
- Implement Dark/Light Mode Feature
### Solving Challenge Job Board
Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.
Requirements
- The page should show 6 jobs on initial load with a button to load more postings.
- Clicking on the "Load more" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.
- If there's a url field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.
- The timestamp can be formatted in any way you like.
# API
- Hacker News has a public API to fetch jobs by Y Combinator companies:
# Job Stories
Fetches a list of job posting IDs.
- URL: https://hacker-news.firebaseio.com/v0/jobstories.json
- HTTP Method: GET
- Content Type: json
Job Details
- Fetches job posting details given its ID.
- URL: https://hacker-news.firebaseio.com/v0/item/{id}.json
- HTTP Method: GET
Content Type: json
# Notes
The focus of this question is on functionality and not on styling, but feel free to beautify the page.
To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.
Project ShowCase :
Visit Link : [[https://job-on-board.netlify.app/]]
### Project Registration Form Using MySql:
- create simple Form with fields username,email,mobile,password and a save button
- save button will show data on UI in the table form.
- while clicking on save button trigger post request through axios to save data inside mysql database
- firstly we have to configure mysql with project and start server
- Then post data and check on mysql workbench whether data save or not
- server code :
const express = require("express");
const bodyParser = require("body-parser");
const mysql = require("mysql");
const cors = require("cors");
const app = express();
const port = 3000;
app.use(cors());
app.use(bodyParser.json());
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "rootlucky",
database: "registration",
});
// Connect to MySQL
connection.connect((err) => {
if (err) {
console.error("Error connecting to MySQL:", err);
return;
}
console.log("Connected to MySQL database");
});
// POST endpoint for user registration
app.post("/userReg", (req, res) => {
const { username, email, mobile, password } = req.body;
const sql =
"INSERT INTO TestUser2 (username, email, mobile, password) VALUES (?,?,?,?)";
const values = [username, email, mobile, password];
connection.query(sql, values, (err, result) => {
if (err) {
console.error("Error executing SQL query:", err);
res.status(500).json({ message: "Registration failed" });
return;
}
console.log("User registered successfully");
res.status(200).json({ message: "User registered successfully" });
});
});
// Start the server
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
- on save button this function runs that save the data and post data into mysql table
const handleClick = async () => {
setRegisteredUsers([...registeredUsers, formData]);
setFormData({ username: "", email: "", mobile: "", password: "" });
try {
const response = await axios.post(
"http://localhost:3000/userReg",
formData
);
console.log(response.data); // Assuming server sends back success message
// You can handle success message here
} catch (error) {
console.error("Error:", error.message);
// Handle error here
}
};
#### Project Showcase :
Learning Advance topics:
- state management library
- advance hooks
- react-routing
- API Handling
- react-redux & react-redux-toolkit
- RTK
- Many more...
## IPL Project:
- Start creating basic IPL Proj Which displays matches, team, table points and many more...
- Use cricbuzz API for data
## Learning Redux:
#### Redux Fundamentals
Now Move to Backend Part:
### 🚀 Node JS Basics:
##### Process:
- process: this object provides information about, and control over, the current Node.js process.
- process.argv: returns an array containing the command-line arguments passed when the node.js process was launched.
##### module.exports
- requiring files
- require() a build-in function to include external modules that exist in seperate files. module.exports a special object
- installing packages
- node_modules: The node_modules folder contains every installed dependency for your project.
- package-lock.json: It records the exact version of every installed dependency, including its sub-dependencies and their version
- package.json the package.json file contains descriptive and functional meta data about a project such as a name,version and dependencies
- npm init
- require vs import
- import {sum} from './math.js';
- we can't selectively load only the piece we need with require but with import, we can selectively load only the piece we need, which can save memory.
Loading is asynchronous for 'require' butt can be asynchronous for 'import'
### 🚀 Backend (Node JS) Series - Learn What Matters 1: Understanding the Internet
🌐 What is the Internet?
◽Discover the origins and evolution of the Internet, and why it's such a crucial part of our daily lives.
🌐 Ownership of the Internet
◽Learn about the decentralized nature of the Internet and explore who owns and manages this vast global network.
🌐 Data Transfer
◽Dive into the fascinating mechanisms behind how your messages and data travel across the Internet. We explore the role of towers and undersea fiber optic cables.
🌐 Packets and Servers
◽Uncover the magic of data packets and how they ensure efficient communication across the web. We also touch on the role of servers in this process.
🌐 HTTP vs. HTTPS
◽Understand the importance of secure web browsing and the differences between HTTP and HTTPS protocols.
🌐 Ports
Explore the concept of ports in networking and how they facilitate the flow of data between your computer and web servers.
### 🚀 Backend (Node JS) Series - Learn What Matters 2: Mastering Node.js Fundamentals
- what is backend ?
backend developer wo banda hai jo ki server and db program karta hai
- why backend
download now par kuch ho
to make websites more usable and purpose ful for the audience, to make websites dynamic
- why not frontend alone ?
with frontend websites are static and they are of not much use.
- what do we need ?
node js, mongodb, mongoose js, express js
- what should we make to hit big companies ?
CONTENT
- node js install
install ka matlab hota hai aapke laptop/computer/tablet usmein files ko copy karna
- import and export
var figlet = require("figlet");
figlet("Hello World!!", function (err, data) {
if (err) {
console.log("Something went wrong...");
console.dir(err);
return;
}
console.log(data);
});
- run the code
node ja hai khoob saara c++ ka code jo ki liya gaya hai chrome browser ke v8 engine ke code se
aur is c++ code jisko liya gaya usey wrap kar
diya gaya js code se and ye hume allow krta hai ke hum js code likhien aur ye js code accept karega and c++ ke basis par aapko ek server
environmant bana kar deta hai, par sirf tab tak
ye code chalayega jab tak apka node (v8 engine and js wrapper) chaalu hai
-- node js core usage & usage & understanding - http
- npm usage
npm - naan paneer makhni
npm ek jagah hai jaha par khoob saare packages milte hai
bani banaai cheejein/features kehlaate hai packages
text -> voice
// hey hello
npm package for text -> audio
- express
// express fromework for node js
// express k use case => routing
// routing => GET POST PUT PATCH DELETE
// /profile = profile
// /contact = contact
// /like/hfvyhjgb = like post
// /comment/jhmvubhjn = comment
// /cart = cart
- express generator
- mongodb
-- intermediate mongodb
-- api development
-- authentication and authorization
-- error handling
- middleware
middleware ek aisa function hai jo kisi bhi route se pehle chalta hai, jiska matlab aapka route chalne se pehle agar aap koi kaam
karana chaahte ho to middleware
ka upyog kiya jaa sakta hai
route pe chalne se pehle print karo chala on console
route chalne se pehle route pe hits counter ki value badhegi
iska matlab route chlne se pehle jo chalega woh hai middleware
sirf ek dikkat hai agar humara iddleware chl gya toh req jaam ho jati hai aur route tak nahi pahuch paati
### 🚀 Express.js - Learn What Matters: Mastering the Framework | Backend (Node JS) Series
- node vs express :
node is the main thing express ke code se hum server ka code likh pate hein and
server kaisa react karega wo bhi express ke help se likhte hai
- what is the real deal ?
- what is express js ?
package, routing perform, server side management & many more....
- why express js ?
http is difficult to use,
express makes this easier.
- Routing
routes banaane ke process ko hum kahte hai routing.
/profile
/home
/contact
/profile/lucky/jhnvhjngb
- Middleware
middleware ek aisa function hota hai jo har route se pehle chalta hai, iska matlab
saare routes mein koi bhi chale usse pehle middleware chalta hai and usmein likha
code pehle execute hota hai
node ke saath ek dikkat hai ki agar control ek baar bhi kisi middleware par gaya to control khud se agle route/middleware par nahi
jaayega, use agle par lejaane ke liyein aapko push karna padega aur ye push kahlaayega next ko chalaana
- Request and Response
req mein saara data hota hai aane waale user ki request ki
taraf ka, jaise ki uski location, info and other things.
res mein controls hote hai jinke basis pe hum server se response bhej paate hai
next is just a push so that our request moves to the next thing which
should be executed.
- Route Parameters
aisa koi bhi route jiska koi hissa baar baar same rehta hai and kuch hissa baar
baar change hota hai iske liye aap ek dynamic route bana skte ho
/profile/:username
/profile/lucky
/profile/ansh
/profile/sachin
URL mein jab bhi aapke paas ek aisa pattern ho
req.params
to make any route dynamic you can use :
at the place where you want
to make it dynamic, and to access there value use req.params
/author/books/issued/harsh
/author/books/issued/harsh
/author/books/issued/harshita
/author/books/issued/lucky
/author/books/issued/ajay
/author/books/issued/:username
- Templates engine
html ke pass superpowers nahi hai calculation krne ki
ejs is html with superpower
ejs setup karne ke liyein
1. ejs install
npm i ejs
2. configure ejs
app.set('view engine','ejs')
3. ek views folder banao
4. usmein ejs files banao
5. send ki jagah render karo => render karte waqt make sure aap views folder ke andar waali hi koi file kaa naam likhein, aur render fnc mein .ejs mention naa karein
ye ek style of markup se convert krke apko html dete hai
Template Engines : pug, handlebars, ejs, jade, etc...
ejs is very very similar to html
ek markup style jo ki baad mein convert
hojaayegi html mein
data send via EJS File
res.send('index',{age:23});
- Static Files
images, stylesheets, frontEnd js setup karna
static files setup karne ke liyein:
1. create a folder called public
2. create three folders inside it, images, stylesheets, javascripts
3. configure the express static in script.js file
4. understand the path
app.use(express.static('./public'))
- HTTP Methods - get and post
- Error Handling
Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously. Express comes with a default error handler so you don’t need to write your own to get started.
app.get("/error", (req, res, next) => {
throw Error("Something Went Wrong");
});
app.use(function errorHandler(err, req, res, next) {
if (res.headersSent) {
return next(err);
}
res.status(500);
res.render("error", { error: err });
});
### 🚀 Backend - The EndGame (Part-1) | Mastering Advanced Concepts | Backend (Node JS) Series
express generator
hum lgo ko kaafi saara kaam karna padta hai express setup krne mein iska matlab har baar jab hum naya project bnaayege to har baar fir se utna hi kaam krna padega, matlab ki poora code likho and sab kuchh setup karo, is time ko bacha sakte ho with help of express generator, use express generator and it will make the folder structure for you and it will also write the basic code for the project.
express genarator ek folder bana ke deta hai, jiska matlab aapko khudse folder nahi banana hai,to express generator saare files ko isi folder mein daal ke dega
steps to use express generator
sabse pehle jeevan mein ek baar laptop par install karo globally
npm i express-generator -g
to create new app anywhere:
open cmd move to desktop
create new app:
express appname --view=ejs
now use two commands
cd appname
npm i
open it to vs code
mondodb
har naye app ka data store hoga storage mein, par usey directly rakne ki jagah ek container mein rakhenge, us container mein sirf us app ka data aayega.
models (code) => collection (db)
schema (code) => documents (db)
ek app ka poora data => db
ek app mein variety of data hota hai par poora data hota app ka hi hai, par us data ka sub category kehlata hai collection
collection malab ki bola users ka data, ek user pe baat kri to hua document
// install mongodb
// install mongoosejs
// require and setup connection
// make schema
// create model and export
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/dbname');
// db create
schema matlab aapko ye batana hai banne waala har document mein kya kya hoga
create User :
const userSchema = mongoose.Schema({
username:String,
name:String,
age:Number
})
// har docuement kesa hoga document data
module.exports = mongoose.model(naam,schema);
// naam se bnega collection
// make collection
Find User:
router.get("/allusers", async (req, res) => {
// let user = await userModel.find();
// find one user (specific)
let user = await userModel.findOne({username:''lucky});
res.send(user);
});
create seperate array of object for creating users:
const users = [
{
username: "lucky",
age: 25,
name: "divyanshu",
},
{
username: "ajay",
age: 22,
name: "ajay",
},
{
username: "rahul",
age: 27,
name: "rahul",
},
{
username: "sachin",
age: 23,
name: "sachin",
},
];
Delete User:
router.get("/delete", async (req, res) => {
let deletedUser = await userModel.findOneAndDelete({
username: "lucky",
});
res.send(deletedUser);
});
dbs, models, schema, collections, documents
dbs, models, schema, collections, documents
understanding sessions
- session and cookies
creating sessions, using sessions across routes and destroying sessions
resave :
// agar session ki value change na huyi ho toh fir se save mat krna
saveUninitialized:false
//esa data baar baar save na kro
secret -> data encrypt kiya jayega
app.use(
session({
resave: false,
saveUninitialized: false,
secret: "holabholaholabhola",
})
);
router.get("/", function (req, res, next) {
// req.session.koibhinam = "lucky kashyap";
req.session.ban = true;
res.render("index", { title: "Express" });
// res.send("hello");
});
router.get("/checksession", (req, res) => {
if (req.session.ban === true) {
res.send("You are banned");
}
// console.log(req.session);
// res.send("check kiya hai console dekho");
});
create -> req.session.koibhinaam = koibhivalue
read
req.session.koibhinaam
delete
req.session.destroy(()=>{
})
Delete Session:
router.get("/removeban", (req, res) => {
req.session.destroy((err) => {
if (err) throw Error(err);
console.log(err);
res.send("ban remove");
});
});
creating cookies, using cookies across routes and destroying cokkies
Create Cookie:
By default package install hota hai
res.cookie("age", 23);
Read Cookie:
router.get("/read", (req, res) => {
console.log(req.cookies);
res.send("check");
});
Delete Cookie:
router.get("/remove", (req, res) => {
res.clearCookie("age");
res.send("clear cookie");
});
Task 1:
hume ek route banana hai, jismein ek page show ho aur waha par ek css use kra hua page dikhein
express js
install
express js boilerplate code
express js ejs setup
install ejs
set view engine
create views folder
create ejs files
render ejs files inside route
express static files setup
architecture of public folder
const data =
{
name: "Lucky",
age: 23,
work: "Developer",
address: "Kalindi Vihar",
}
res.render('index',{data});
User Information
Name: <%= data.name %>
Age: <%= data.age %>
Profession: <%= data.work %>
### 🚀 Backend - The EndGame (Part-2) | ElevateYour Skills | Backend (Node JS) Series
flash messages
jab bhi aap ejs page ko dekhenge waha par aapko kisi prakaar ka koi info dena hai, wo kehlata hai flash message, they are more like good looking alerts, warning and descriptions
install connect-flash
- make sure you put connect flash in app.use function
- kisi bhi route mein aap ko flash create karna hai
- kisi bhi doosre route par app use chalane ka try karein
- aap connect flash ko use nahi kr skte bina express session
express level-6 --view=ejs
cd level-6
npm i
npm i connect-flash
npm i express-session
// setup express session
const expressSession = require("express-session");
const flash = require("connect-flash");
app.use(
expressSession({
resave: false,
saveUninitialized: false,
secret: "hello you connect with flash",
})
);
app.use(flash());
// to run
npx nodemon
localhost:3000
- hum log chahte hai ki jab ham kisi route par jaayein jaise ki /failed us route par ek flash message bane aur wo flash message hum logo ko/ route par dikhein ejs mein
- flash message ka matlab server ke kisi route mein koi data banana and us data ko doosre route kar paana
- flash message aapko ye allow krte hai ki aap is route mein bane huye data ko doosre route mein use kr sko
- agar login hojayein to login page ke baad profile page dikhado
- agar naa ho to fir, mujhe is route se kisi aur route lejao jaise ki /error aur wha par dikhao failed
router.get("/failed", function (req, res) {
req.flash("age", 23);
req.flash("name", "Lucky Kashyap");
// res.render("index");
res.send("ban gaya data");
});
router.get("/checkkaro", (req, res) => {
console.log(req.flash("age"));
console.log(req.flash("name"));
res.send("check karlo backend ke terminal par");
});
intermediate mongodb
mongoose setup
npm i mongoose
mongoose.connect('mongodb://127.0.0.1:27017/testingendgame2);
- How can I perform a case-insensitive search in Mongoose?
router.get("/find", async (req, res) => {
// let user = await userModel.find({ username: "ajay" });
// let regex = new RegExp("Ajay", "i");
let regex = new RegExp("^harsh$", "i");
let user = await userModel.find({ username: regex });
res.send(user);
});
- How do I find documents where an array field contains all of a set of values?
let user = await userModel.find({ categories: { $all: ["wwe"] } });
- How can I search for documents with a specific date range in Mongoose?
let date1 = new Date("2023-12-10");
let date2 = new Date("2023-12-12");
let user = await userModel.find({
datecreated: { $gte: date1, $lte: date2 },
});
- How can I filter documents based on the existence of a field in Mongoose?
let user = await userModel.find({ categories: { $exists: true } });
- How can I filter documents based on a specific field's length in Mongoose?
let user = await userModel.find({
$expr: {
$and: [
{ $gte: [{ $strLenCP: "$nickname" }, 0] },
{ $lte: [{ $strLenCP: "$nickname" }, 12] },
],
},
});
authentication and authorization
npm i passport passport-local passport-local-mongoose
- write app.js code first in app.js file and write it after view engine & before looger
- setup user.js
- in index.js try register first & then other code as well
choosing project:
Project Creating :
### [PROJECT🚀] Pinterest Clone Tutorial Part 1: Building Your Own Social Inspiration Platform!
Learning data association
- ek model se doosre model ke data ko jod dena id ke through, matlab ki agar aap ke pass ek user hai to wo post bnaayeha hi, jab post banega to wo user ke dwaara hi banega, to hum kya krte hai jab do aise data aapas mein closely related hote hai to hum dono ko jod dete hai, ki ek model ke bane huyein data ki id doosre model ke data ko dedete hai aur is model ke data ki id pichhle model ke data ko de dete hai.
- do models bnao
- make a mongoose model for me which contains user details, as such username,password,posts which is an array,dp,email and full name.
- make another model for me, this time for posts,every post contains, post text, current date & time, likes
- ab ek route bnao jisme ek user ban jaayein
express pinterest --view=ejs
- /route par login and signup hoga
- / route par aapko aapki profile dikhegi and aapke saved posts dikhege, aur ek uploaded section hoga jo abhi nahi bana rahe
- Install mongoose
npm i mongoose
- / feed yaha par saari images dikhegi
- /click karke image open hojaayegi save kr skte ho
- Use Passport JS for login/register/signUp
npm i passport passport-local passport-local-mongoose express-session
- configure login/register/signup functionality
- create /profile route & redirect user when register successfully
- /board/:boardname poora board dikhega
### Upcoming Projects:
- youtube music
- instagram
- google photos
- flipkart
-- deployement
-- testing
-- realtime stuff
### Self Learning And Building Things Up to Grow More..!!
Happy Coding With ☕ Divyanshu Kashyap 💻🚀