Code test made by the company CodeLeap, to create a web application based on a basic layout, following the required functionality.
The app is very simple and works as a small social network (network) for people to enter and create posts.
The following tools were used in building the project:
- 👉 NextJS
- 👉 ReactJS
- 👉 TypeScript
- 👉 Chakra UI
- 👉 Radix UI
- 👉 ReactHookForm
- 👉 ReactQuery
- 👉 Yup
- 👉 React Scroll
- 👉 React Icons
- 👉 Sass
- 👉 Axios
- 👉 DateFNS
- 👉 Nookies
- 👉 Jest
- 👉 Testing Library
- 👉 AnimateOnScroll
- 👉 FaunaDB
- 👉 Bcrypt
- 👉 Jsonwebtoken
🤖 Project Status 🚀 Complete! 🤖
Access at the address: https://codeleap-chi.vercel.app
These instructions will get you a copy of the full project up and running on your local machine for development and testing purposes.
The project can be built with npm or yarn, so choose one of the approach bellow in case you don't have any installed on your system.
-
Npm is distributed with Node.js which means that when you download Node.js, you automatically get npm installed on your computer. Node.js
-
Yarn is a package manager built by Facebook Team and seems to be faster than npm in general.
- ✅ Sing in with email and password;
- ✅ Registration of a user, password encryption with Bcrypt;
- ✅ Verification of an existing user;
- ✅ FaunaDB database connection;
- ✅ User authentication and jwt token generation;
- ✅ Update user data with password confirmation;
- ✅ Implementation of automatic redirect if user is "Logged in" (with username) via withSSRGuest;
- ✅ Implementation of automatic redirect if user is not "Logged in" (with username) via withSSRAuth;
- ✅ Toast notification for user;
- ✅ Loading screen for the data request to happen;
- ✅ Input animations for elements;
- ✅ Save user username in cookies;
- ✅ Data caching with react query;
- ✅ Scroll to go back to top;
- ✅ http requests with axios to django api;
- ✅ List of posts;
- ✅ Form Validation with Yup;
- ✅ Form control with React Hook Form;
- ✅ Date formatting with date-fns;
- ✅ Deleting a post;
- ✅ Editing a post;
- ✅ Post pagination;
- ✅ User choose the amount of posts they want to see per page;
- ✅ Adding Unit Tests with Jest and Testing Library;
- ✅ Using Context API to control user methods and data;
- ✅ Interface developed with system Chakra UI and Radix UI design;
- ✅ Responsiveness with mobile devices;
- ✅ Modern design;
- ✅ Deploy in Vercel.
- To download the project follow the instructions bellow:
1. git clone
2. cd codeleap-app- Install the dependencies and start:
3. yarn
4. yarn dev- or
3. npm install
4. npm run dev- Have fun just like me while programming
- Sign in
- Sign up
- Network
- Network
- Modal Delete
- Modal Edit
- Account
- Modal Confirm Account
Luiz Felipe S. Felizatti 🎯
Contact: