Frontend Developer Position.
Please read this document from beginning to end, paying close attention.
The purpose of this test is to evaluate your technical knowledge in programming.
Take as much time as you need, but typically, you should not require more than a few hours.
ReactJS/NextJS
5-8 hours (depending on available time and expected complexity)
First, fork this project to your Github account (create one if you don't have it).
Next, implement the project as described below in your local clone.
Finally, send the project or fork/link of the project via email to your CYBERBOX contact wilker.flores@protonmail.com.
You are required to develop a small blog application with the following functionalities:
-
Homepage:
Display a list of blog posts in descending order based on the publication date.
Each list item should show the title, a brief summary, and the publication date.
The homepage should be created using NextJS's Static Site Generation (SSG).
-
Post Detail Page:
When a user clicks on a post on the homepage, they should be directed to the post detail page.
This page should display the title, publication date, full content of the post, and related comments.
Server Side Rendering (SSR) from NextJS should be used to fetch post details for each post.
-
Add/Edit Post Page:
Implement a form to add a new blog post.
The form should include fields for the title, summary, content, and publication date.
The same form should be used to edit existing posts.
-
Authentication:
Implement basic authentication (can be a mock) to protect the add/edit post page.
Only authenticated users should be able to add or edit posts.
-
Comments:
Allow users to leave comments on the posts.
For this, a form should be available on the post detail page.
-
Notifications:
Implement a basic notification system that notifies the user when a new comment is added to one of their posts.
-
Validations:
Implement validations on the add/edit post and comment forms to ensure that the entered data is valid.
Use ReactJS for building the user interface.
Utilize NextJS for Server Side Rendering (SSR) and/or Static Site Generation (SSG).
For state management, use context API or Redux (optional).
For styling, use CSS-in-JS (e.g., styled-components) or CSS/Sass.
Code should be well-organized and easy to understand.
Comments in the code to explain design decisions are encouraged.
Your project will be evaluated based on the following criteria:
Does your application meet the basic requirements?
Have you documented the setup instructions and how to run your application?
Did you follow the challenge submission instructions?
Additionally, we will try to assess your familiarity with standard libraries and your experience with object-oriented programming based on the structure of your project.
Good luck!