/user-management

A simple user management as a sample of next project

Primary LanguageHTML

User Management

A simple user management as a sample of next project

How to use

  1. You can change baseUrl from next.config.js
  2. Run npm install to install all dependencies.
  3. How to start the project:
  • Run npm run dev to start the server in the development mode.
  • Run npm run build to generate build files, and npm run start to start server in production mode. (Use production mode to check dynamic import.)
  1. Open http://localhost:3000 with your browser to see the result.
  2. In the development mode , the page will reload if you make edits.

Sample data

Users' sample data is available in src/sample-data/users.json.

[
  {
    "id": 1,
    "email": "sadra@example.com",
    "firstName": "Sadra",
    "lastName": "Shirazi",
    "age": 36,
    "address": "63 Hanson Place, Alfarata, Illinois",
    "avatarUrl": "/avatars/fdsar.jpg"
  },
  ...
]

There are sample avatars in public/avatars.

Generate fake date by json-generator.com

The sample users data generated by json-generator.com.

The following is the config for the json generator:

 JG.repeat(1, 100, {
     id: JG.index(),
     email() {
         return (
             _.snakeCase(this.name) +
             '@' +
             JG.company() +
             JG.domainZone()
         ).toLowerCase();
     },
     firstName: JG.firstName(),
     lastName: JG.lastName(),
     age: JG.integer(18, 70),
     address: `${JG.integer(1, 100)} ${JG.street()}, ${JG.city()}, ${JG.state()}`,
 });

Features and Examples

Screenshots

The app's screenshots can be found public/avatars.

User management

TODO

  • Add routes/pages (Home, User List Page and User Details Page)
  • User List Page
    • Display a list of users (Name, Email, Age, and Actions)
    • Pagination
      • Limit to 10 users per page
    • Sort (sorting for Name and Age)
    • Search
  • User Details Page
    • Display detailed information of a selected user (Full Name, Email, Age, Address, and Profile Picture)
    • Provide a back button (Added Breadcrumbs instead of a back button)
  • Home page (fetch data from JSONPlaceholder)
    • List posts
    • Add new post
    • Delete post
  • TypeScript
  • React Feature (useState, useEffect, useMemo)
  • State Management (theme switcher)
  • Performance
    • next/dynamic (next/dynamic is a composite of React.lazy() and Suspense)
    • Lighthouse
    • Optimize code
  • Documentation
    • README.md
    • Screenshots
    • Storybook
  • Responsiveness
  • Tests
    • Unit Test
    • E2E Test
    • Interactions by storybook
    • Accessibility
  • CI/CD
  • Config ESLint

Feedback

Please submit an issue on GitHub if you have any feedback

Contributing

Contributions are always welcome!

To contribute to this repository, please make a PR.

Authors

License

MIT

References