Assignment Category 05
Assignment Category 05
Dear Candidates,
Are you a front-end developer who thrives on building beautiful and functional web
experiences? Do you enjoy clean code and keeping up with the latest tech trends?
We're looking for you! We're building the next generation of our blog website and need
a talented developer to join our team. You'll collaborate with designers and back-end
developers to bring mockups to life using React, Firebase, and other cutting-edge tools.
You'll be responsible for crafting a user-friendly and engaging experience for our
audience. This includes building dynamic web pages, ensuring smooth navigation, and
optimising website performance for all devices.
Blog Website
Welcome to the Blog Website Development project! We're seeking a talented Front-End
Developer to help bring our next-generation blog website to life. This exciting project
will allow you to design and implement beautiful, responsive web pages, collaborating
with designers and back-end developers. The project involves creating a dynamic,
user-friendly experience for visitors, using modern technologies like React and
Firebase.
If your Deployment is not okay you will get 0 and may miss the chance of our upcoming
rewards.
● Ensure that your server is working perfectly on production and not throwing any
CORS / 404 / 504 Errors.
● Ensure that your Live Link is working perfectly and that it is not showing errors
on Landing in your system.
● ⚠️ ensure that the page doesn't throw any error on reloading from any routes.
● ⚠️ Add your domain for authorization to Firebase if you use Netlify / surge
● ⚠️ Logged in User must not redirect to Login on reloading any private route
Note: If the user is not logged in, the Login and Register buttons should show, and if
the user is logged in show his profile picture and logout button.
Authentication System
1. You Must implement Email and password-based Authentication. This means you
will have to implement the Registration and the login page.
2. Also, implement at least one extra login which could be (Facebook, github,
google, etc).
3. Add a 404 page (not found page)
4. On the Login and registration page, display errors when email password
authentication fails
5. On the Registration page, display errors when the password :
a. is less than 6 characters
b. don't have a capital letter
c. don't have a special character
d. don't have a numeric character
Home Page
1. Home page will have a header (simple navbar), banner (hero section), recent
blog posts section, newsletter section, and footer (design in on your. Make
your website beautiful using your imagination)
2. You will have to show six blogs in the recent blogs section. Show some
properties from the data as you want
a. A details button
b. A wishlist button
3. Clicking the wishlist button will add the blog to the currently logged-in user's
wishlist.
4. In the newsletter section if a user inputs an email and submits it, then the
user will receive a toast message. Message could be "Thank you for
subscribing to our newsletter" or a relevant message. You don’t need to send
emails.
5. Add two extra sections on the home page with the five sections mentioned
above.
a. Tips: This is the place to shine. Add something different and unique
to
make your website look different from others. And Make them relevant to
your website.
3. Each blog should have a title, image, short description, category, details
button and wishlist button.
4. Clicking the wishlist button will add the blog to the logged-in user's wishlist and
when the user navigates to the wishlist page he/she can see the blogs they
wishlisted.
5. Clicking the details button user will navigate to the blog details page
5. Users cannot comment on his/her own blog. show "Can not comment on own
blog" or relevant text in the comment section instead of a textarea if a blog writer
is a
current user (Clue: Compare blog email with firebase user email and
conditionally render the textarea)
6. There will be a conditional update button. If the current user is a blog owner
then show the update button. Clicking the update button will navigate a dynamic
route where blog details can be updated. (Clue: Same as the previous clue).
Description of the update route is described below.
Add Blog Page
1. Create a form which will take blog information like title, image url, category,
short description, long description and a submit button.
2. category must be a dropdown element (use <select></select> tag or any
package)
Wishlist Page
1. In this page show all the blogs wishlisted by a specific user.
2. Each blog should have some properties as like featured blog page
3. Add a details button and a remove wishlist button
4. Clicking on remove wishlist will remove the blog from his/her wishlist
1. Instead of using loading spinners use loading skeletons while data
fetching a. Clue:You can explore react-loading-skeleton
Photo View:
1. On clicking the image of the blog the image will be in full-screen preview
mode. a. Clue: You can explore react-photo-view
Component library:
1. Use any component library without daisy ui. Here are some suggestions (better
to not use more than one)
a. Chakra-ui
b. Ant design
c. flowbite react
d. Rsuitejs
e. material ui
What to Submit
Live Site Link :
Github Repository ( server ) :
Github Repository ( client ) :