- Project aims to create a Full Stack blog app project .
- This is the frontend side of my blog app project.
- I used django for backend.
You can see the backend side of this project from here π
- The welcome page will be the home page and the user will not be able to access other pages without login
- Users who have logged into the system will be able to see all posts on the home page and posts detail on the detail page of the relevant post.
- All users can comment or like their own posts and other users posts..
- Only posts owners will have the authority to edit and delete posts.
- Users can also update their user information and profile picture by coming to the profile section.
- For register, login and profile update page, i used the formik-yup library in accordance with our backend.
- When the user logs in, we will send the token information and user informations values to sessionStorage.
- I used the window.btoa() and window.atob() methods while assigning and withdrawing the token to the storage.
- I used the Tailwind CSS for styling.
- I also use the framer motion library for smooth transitions.
You can reach my project from here π
fs-reactjs-blog-app (folder)
|----readme.md
SOLUTION
βββ public
β βββ index.html
βββ src
β βββ app
β β βββ store.jsx
β βββ assets
β β βββ [images]
β βββ components
β β βββ formik
β β β ββββ Login
β β β β βββ LoginForm.jsx
β β β β βββ LoginSchema.jsx
β β β ββββ Profile
β β β β βββ ProfileForm.jsx
β β β β βββ ProfileSchema.jsx
β β β ββββ Register
β β β βββ RegisterForm.jsx
β β β βββ RegisterSchema.jsx
β β βββ DeleteModal.jsx
β β βββ EditModal.jsx
β β βββ Footer.jsx
β β βββ Navbar.jsx
β β βββ PostCard.jsx
β β βββ PostDetails.jsx
β βββ Features
β β βββ auth
β β β βββ authService.js
β β β βββ authSlice.js
β β βββ post
β β βββ postService.js
β β βββ postSlice.js
β βββ helpers
β β βββ AnimatedPage.js
β β βββ customToastify.js
β β βββ functions.js
β β βββ loaders.js
β β βββ ScrollToTop.js
β βββ pages
β β βββ Home.js
β β βββ Login.js
β β βββ Myposts.js
β β βββ NewBlog.js
β β βββ NotFound.js
β β βββ Profile.jsx
β β βββ Register.jsx
β β βββ SearchPage.jsx
β βββ router
β β βββ AppRouter.jsx
β βββ App.js
β βββ App.css
β βββ index.js
βββ .env
βββ .gitignore
βββ package-lock.json
βββ package.json
βββ postcss.config.js
βββ tailwind.config.js
βββ yarn.lock
- HTML
- CSS
- JavaScript
- ReactJS
- Axios
- Redux Toolkit
- React Router DOM
- Formik-Yup
- Tailwind CSS
- Framer Motion
- React-Toastify
To run this project;
$ git clone https://github.com/esadakman/fs-reactjs-blog-app
$ cd ./fs-reactjs-blog-app
$ npm install / yarn
$ npm start / yarn start