Skip to content

Basic CRUD web app with authentication. Which allows users to manage posts by creating, reading, updating, and deleting them. Users can navigate through pages of posts, filter them by category, and perform actions like editing or deleting, Website is in both dark and light modes and supports internationalization.

Notifications You must be signed in to change notification settings

mahmoudAliaboElhassan/Posts-Crud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This Crud is for posts to handle Adding, Editing and Deleting posts

How to use the Website

Posts-CRUD.mp4

This Crud was made by many libraries

  1. react-router-dom to serve the principle of Single Page Application.

  2. react-redux and redux toolkit to handle state management globally.

  3. axios to deal with API for Authentication, fetching, adding, editing and deleting Posts.

  4. bootstrap and react-bootstrap to serve the principle of responsiveness.

  5. formik and yup to handle validation of inputs with rules of length, number or letter , non-empty fields by using regular expression.

  6. framer-motion to make beautiful Transitions between pages.

  7. i18next, i18next-browser-languagedetector, i18next-http-backend, react-i18next and i18next-http-backend to make website multilingual.

  8. mdb-ui-kit for flags that appears when dealing with languages.

  9. sweetalert to display beautiful alerts for warning when deleting post or when there is a problem in authentication.

  10. react-toastify to display amazing toasts when signing up , logging in , adding post, editing post.

  11. react-select to display awesome select for Posts type.

  12. gh-pages to activate the hosting of github.

    • In addition to the Website can be in both modes Dark and Light.
    • Website uses Loader that appears when navigation between pages.
    • There is a page for every post that display its title, description, image, type and date posted in day, date, hour, minute, second.
    • there is an error page that display the error as you can not go to post/ch it must be number.
    • there is a component called loading.jsx that can display loading message and error if exists, if children is button it clone it and change to loading and make it disabled.
    • Website uses axios instance to shorten The code.
    • Website uses used withGuard that acecpt component to apply the principle of higher order component (HOC) to use the principle of protected routes.
    • Images as icons of .svg extension from react-feather library.
    • Website uses React.lazy to load components lazily, to make the component will be loaded only when it's actually needed, which help improving the initial loading time and performance .
    • Website uses convention to make CSS styles are scoped to a specific component and prevent other component of being styled by.
    • Website uses used some ECMAScript principles in different places such as ternary operator and AND operator (&&) to handle true condition only. -Website was keen on being optimized and there is no many re-renders thought useCallback.
    • Website uses Prefixes in CSS to handle browser-specific CSS properties and features that are still in development or are not fully supported by all browsers to ensure that the styles are applied correctly.
    • Footer used entity to display copy rights icon and current year in footer is dynamic and is changed every year.
    • Website uses navigation buttons to navigate between pages to display posts.
    • Website uses select to filter posts with localStorage.
    • Website uses Optional Chaining to Increase readability and simplify otherwise long logical conjunctions and complex-looking conditions.
    • Website uses the principle of custom hooks to shorten The code and make it more efficient.
    • Website was keen on beeing friendly with Search Engine Optimization (SEO).
    • Website uses real authentication and validating it from (SignUp , LogIn , ForgetPassword , Reset Password).
    • demo of the site Live Preview.
    • and here is the link of backend used in This Project Backend-Repo.

    This is all I wanted to say thanks for reading.

About

Basic CRUD web app with authentication. Which allows users to manage posts by creating, reading, updating, and deleting them. Users can navigate through pages of posts, filter them by category, and perform actions like editing or deleting, Website is in both dark and light modes and supports internationalization.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published