Enough with the tutorials and practice, now it's a time to build up something good and my own.
Starting with this movie clone app.
Just completed with my landing page made as simple as I can as a beginner
find out my repo: princepatel157/moviekiss-web-app
Please rate my work how is it going from the start and reply with the suggestion if any please...
Checkout the simplest code snippets:
- CategoryBar.js:
import React from "react";
import "./Catog.css";
import { Link } from "react-router-dom";
import HomeIcon from "@material-ui/icons/Home";
import MovieIcon from "@material-ui/icons/Movie";
import TvIcon from "@material-ui/icons/Tv";
import LanguageIcon from "@material-ui/icons/Language";
import TranslateIcon from "@material-ui/icons/Translate";
import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import MoreVertIcon from "@material-ui/icons/MoreVert";
function Catog() {
return (
<>
<div className="container cat_bar">
<div className="row ">
{/* home */}
<div className="col-xs-2 block_item">
<div className="dropdown">
<span className="option">
<HomeIcon className="icons" />
<Link to="/" className="home_cat_links">
Home
</Link>
</span>
</div>
</div>
{/* movie */}
<div className="col-xs-2">
<div className="dropdown">
<span className="option">
<MovieIcon className="icons" />
Movies
<ArrowDropDownIcon className="icons" />
</span>
<div className="dropdown_content">
<p>
<Link to="#" className="cat_links">
Bollywood
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Hollywood
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Dual Audio
</Link>
</p>
</div>
</div>
</div>
{/* web series */}
<div className="col-xs-2">
<div className="dropdown">
<span className="option">
<LanguageIcon className="icons" />
Web Series
<ArrowDropDownIcon className="icons" />
</span>
<div className="dropdown_content">
<p>
<Link to="#" className="cat_links">
Hindi Dubbed
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Adult
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Netflix
</Link>
</p>
</div>
</div>
</div>
{/* tv shows */}
<div className="col-xs-2">
<div className="dropdown">
<span className="option">
<TvIcon className="icons" />
Tv Shows
<ArrowDropDownIcon className="icons" />
</span>
<div className="dropdown_content">
<p>
<Link to="#" className="cat_links">
Action
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Adventure
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Animation
</Link>
</p>
</div>
</div>
</div>
{/* dual audio */}
<div className="col-xs-2">
<div className="dropdown">
<span className="option">
<TranslateIcon className="icons" />
Dual Audio
<ArrowDropDownIcon className="icons" />
</span>
<div className="dropdown_content">
<p>
<Link to="#" className="cat_links">
Movie
</Link>
</p>
<p>
<Link to="#" className="cat_links">
Series
</Link>
</p>
</div>
</div>
</div>
{/* year */}
<div className="col-xs-2">
<div className="dropdown">
<span className="option">
<CalendarTodayIcon className="icons" />
Year
<ArrowDropDownIcon className="icons" />
</span>
<div className="dropdown_content">
<p>
<Link to="#" className="cat_links">
2020
</Link>
</p>
<p>
<Link to="#" className="cat_links">
2019
</Link>
</p>
<p>
<Link to="#" className="cat_links">
2018
</Link>
</p>
<p>
<Link to="#" className="cat_links">
before 2018
</Link>
</p>
</div>
</div>
</div>
{/* more */}
<div className="col-xs-2 block_item">
<div className="dropdown">
<span className="option">
<Link to="/" className="more_cat_links">
More
<MoreVertIcon className="icons" />
</Link>
</span>
</div>
</div>
</div>
</div>
</>
);
}
export default Catog;
- CategoryBar.css
.cat_bar {
margin-left: auto;
margin-right: auto;
align-items: center;
}
.dropdown {
position: relative;
display: flex;
justify-content: flex-end;
padding: 10px;
background-color: rgb(173, 235, 216);
margin-right: 2px;
margin-left: 2px;
}
.dropdown_content {
display: none;
position: absolute;
z-index: 1;
background-color: #94ff9a;
min-width: 120px;
padding: 12px 16px;
}
.dropdown:hover .dropdown_content {
display: block;
background-color: rgb(148, 236, 210);
}
.dropdown:hover {
background-color: rgb(75, 241, 192);
}
.cat_links {
text-decoration: none;
}
.icons {
padding: 1px;
margin-right: 10px;
margin-left: 10px;
}
.home_cat_links {
padding-right: 10px;
}
.more_cat_links {
padding-left: 10px;
}
- ProductFrame.js:
import React from "react";
import "./Product.css";
const Poduct = (props) => {
return (
<>
<div className="product">
<div className="product_img">
<img src={props.image} alt="" />
</div>
<div className="product_info">{props.name}</div>
</div>
</>
);
};
export default Poduct;
- ProductFrame.css:
.product {
display: flex;
flex-direction: column;
/* align-items: center; */
width: 200px;
height: 450px;
margin-left: 60px;
margin-top: 40px;
margin-bottom: 20px;
background-color: white;
}
.product_img {
width: 100%;
height: 100%;
}
.product_info {
font-weight: 700;
/* padding-left: 3px; */
text-align: center;
margin-bottom: 15px;
}
***For the whole Code refer my git-hub repo -> https://github.com/princepatel157/moviekiss-web-app
Top comments (4)
Wow! This looks great for your first project, huge well done. It looks very clean.
The only suggestion I have; and it's mainly just a preference: Destructuring your props is in general a good practice.
yes thanks for this one
In this code quality looks poor
learning and will be working on it....
coming up with that and going to make it good quality of code practice for the next project
I am still way behind but motivated. Thank you. My dream app will see light of day.
stay motivated, inspired and perseverance
thats all we need for good outputs
❤️