/news-it-dev

News IT helps everyone want to study, improve your knowleage about new technology, new programming languages, framework,...

Primary LanguageTypeScript

OVERVIEW PROJECT

  • Name project: Website News about Information Technology

  • Front-End:

    • ReactJS
    • Redux Toolkit
    • MUI
    • ReactQuill
    • Socket.IO
    • Tool: ViteJS

  • Back-End:

    • NodeJS
    • ExpressJS
    • TypeORM
    • Socket.IO

  • Database: MySQL

FRONT-END

  1. Code Structure
src
    |__components
        |__common
        |__index.tsx
    |__features
        |__News
            |__pages
                |__index.tsx
            |__components
                |__index.tsx
            |__index.tsx
    |__layouts
        |__index.tsx
    |__hooks
        |__index.tsx
    |__redux
        |__index.tsx
    |__utils
        |__index.ts
    |__App.tsx
    |__main.tsx

BACK-END

  1. Code Structure
src
    |__config
        |__data.ts
        |__index.ts
    |__controllers
        |__user.controller.ts
        |__index.ts
    |__entities
        |__user.entity.ts
        |__index.ts
    |__services
        |__user.service.ts
        |__index.ts
    |__middlewares
        |__auth.middleware.ts
        |__index.ts
    |__models
        |__user.model.ts
        |__index.ts
    |__enums
        |__user.enums.ts
        |__index.ts
    |__routes
        |__user.router.ts
        |__index.ts
    |__utils
        |__index.ts
server.ts
  1. TODO

  • Auth:

    • ✅ Signup
    • ✅ Login
    • ✅ Logout
    • ✅ Refresh token when access token expires
    • ❌ Send mail when sign up by email

  • Users:

    • ✅ CRUD User
    • ✅ Follow/Unfollow User of User
    • ✅ Get profile
    • ✅ Reset password when forgot password
    • ✅ Get profile
    • ✅ Edit profile
    • ❌ Change password when user want to
    • ✅ Sort and Filter User

  • News:

    • ✅ CRUD News
    • ✅ Get News by Public
    • ✅ Count views
    • ✅ Like/Dislike News
    • ✅ Save/UnSave News of User
    • ✅ Sort and filter News

  • Roles:

    • ✅ CRUD role
    • ✅ Add Entity color

  • Hash tags:

    • ✅ CRUD hash tag
    • ✅ Follow/Unfollow Hash tag by User
    • ✅ Add Entity color, icon(img)

  • Comments:

    • ✅ CRUD comments
      • ❌ Add comment
      • ❌ Edit comment by self User
      • ❌ Delete comment by self User
      • ❌ Mention User when user Comment

  • Form

    • ✅ Form Image:
      • ❌ Drag & Drag img from outside (ImageField)

  • Recommend System: ❌

  1. FRONT-END TODO

  • USER INTERFACE:

    • ✅ List News

    • ✅ News Detail

    • ✅ Login

    • ✅ Sign up

    • ✅ List Tags

    • ✅ Tag Detail: Get all news by tagId

    • ✅ Profile:

      • ✅ Profile
      • ✅ Setting

    • ✅ Detail User

    • ✅ Reading list (Save)

    • ❌ Search page

    • ❌ Create News

    • ✅ Dashboard:

      • ✅ News List
      • ✅ Following List
      • ✅ Followers List
      • ✅ Tags List Follow

  • Features:

    • Reading List Page:
      • ❌ Archive & Unarchive for news saves of this user.
      • ❌ Filter news into user by hash tag and search.
    • Make profile for user

  • Skeleton:

    • ❌ News list
    • ❌ News detail
    • ❌ Hash tag list
    • ❌ Hash tag detail

COMMENTS (TODO)

  • Create Comment:

  • Delete Comment:

  • Update Comment:

  • Like Comment:

THE FOLLOW MAKE NOTIFY

  • After user create new news, emit socket to create notify.
  • Then, after create notify, it need to emit for client to add new notify to redux client.

https://www.youtube.com/watch?v=qikE08Zrnds&list=PLs4co9a6NhMyAfSnDg1MKGwLdLx0OA07d&index=33

MULTI LANGUAGES (i18next)

https://react.i18next.com/latest/using-with-hooks