title: What did I do wrong when I push database registers to Json-server to users.json. I have 404 not found
body: <p>I am new to ReactJs coding, I have watched some videos about fake JSON-Server, but I don't know how to post all data from register.js to my &quot;users.json&quot; through &quot;server.js&quot;.</p>
  <p>What I do is I have an edit &quot;package.json&quot; &quot;script&quot;: &quot;auth&quot;: &quot;node server.js&quot; and  npm i json-server, npm i json-server jsonwebtoken body-parser --save-dew and npm run auth to run server.js
  I learn this on youtube...</p>
  <p>Here is my source code. Someone can fix my wrong &quot;post&quot;, Thank you!</p>
  <p>users.json</p>
  <pre><code>{
      &quot;users&quot;: [
        { 
          &quot;id&quot;: 1 
          &quot;username&quot;:&quot;admin&quot;,
          &quot;email&quot;: &quot;123@gmail.com&quot;,
          &quot;phone&quot;: &quot;01234&quot;,
          &quot;pass&quot;: &quot;admin1234&quot;,
          &quot;gender&quot;:&quot;female&quot;,
          &quot;role&quot;:&quot;shop&quot;
        }
      ]
    }
  </code></pre>
  <p>server.js</p>
  <pre><code>const fs = require(&quot;fs&quot;); 
  const bodyParser = require(&quot;body-parser&quot;);
  const jsonServer = require(&quot;json-server&quot;);
  const jwt = require(&quot;jsonwebtoken&quot;);
  
  
  const server = jsonServer.create();
  const userdb = JSON.parse(fs.readFileSync(&quot;./database/users.json&quot;, &quot;utf-8&quot;));
  server.use(bodyParser.urlencoded({extended: true}));
  server.use(bodyParser.json());
  server.use(jsonServer.defaults());
  
  const SECRET_KEY = &quot;85423112&quot;; //*random key to see access-token
  const expiresIn = &quot;1h&quot;;
  
  function createToken(payload) {
      return jwt.sign(payload, SECRET_KEY, {expiresIn});
  }
  function isLoginAuthenticated({username, password}) {
      return (
          userdb.users.findIndex((user) =&gt; user.username === username &amp;&amp; user.pass === password) !== -1 
      ); ư
  }
  function isSignupAuthenticated({username}) {
      return (
          userdb.users.findIndex((user) =&gt; user.username === username ) !== -1);}
     
  server.post(&quot;api/auth/register&quot;, (req,res)=&gt;{
      const {username,email,phone,password, gender,role} = req.body;
      if(isSignupAuthenticated({username})){
          const status = 401;
          const message = &quot;Username already taken&quot;;
          res.status(status).json({status,message}) //*taken err will appeare in web console
          return;
      }
  
      fs.readFile(&quot;.database/users.json&quot;, (err, data) =&gt; {
          if(err){
               const status = 401;
               const message = &quot;err&quot;; 
               res.status(status).json({status,message}) //*err when read file in system will appeare in web console
               return;
          }
           data = JSON.parser(data.toString()); 
          let last_item_id = data.users[data.user.length - 1].id;
  
          data.users.push({id: last_item_id +1, username:username,email:email,phone: phone, pass:password,  gender:gender, role:role });
          let writeData = fs.writeFile(&quot;./database/users.json&quot;, JSON.stringify(data), (err, result)=&gt;{
              if (err) {
                  const status = 401;
                  const message = &quot;err&quot;; 
                  res.status(status).json({status,message}) 
                  return;
              }
          });
      });
      const access_token = createToken({username,password});
      res.status(200).json({access_token}); //* set status to be OKKKKK when create account success =)))
  });
  
     server.post(&quot;/api/auth/login&quot;, (req,res)=&gt;{
      const {username,password} = req.body;
      if(!isLoginAuthenticated({username,password})){
          const status = 401;
          const message = &quot;Incorrect Username or Password&quot;;
          res.status(status).json({status,message}) //*wrong will appeare in web console
          return;
     }
     const access_token = createToken({username,password});
     res.status(200).json({access_token}); //* set status to be OKKK when login ok =)))
   });
   server.listen(5001, ()=&gt;{
       console.log(&quot;running json api server&quot;);
   });
  
  </code></pre>
  <p>Register.js</p>
  <pre><code>import React, {useState} from 'react'
  import '../styles/Signup.css'
  import axiox from &quot;axios&quot;;
  import {useHistory, Link} from 'react-router-dom'
  import VisibilityIcon from '@mui/icons-material/Visibility'
  import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
  function Register() {
    const [username,setUsername]= useState(&quot;&quot;);
    const [password,setPassword]= useState(&quot;&quot;);
    const [email,setEmail]= useState(&quot;&quot;);
    const [phone,setPhone]= useState(&quot;&quot;);
    const [gender,setGender]= useState(&quot;&quot;);
    const [role,setRole]= useState(&quot;&quot;);
    const [error, setError]= useState(&quot;&quot;);  
    let history = useHistory();
  
  
    const [showPass,setshowPass]= useState(false);    
    const [showconfirmPass,setshowconfirmPass]= useState(false);    
  
  const register = (e) =&gt; {
    e.preventDefault();
    axiox.post(&quot;http://localhost:5001/api/auth/register&quot;, 
    {username,
    email,
    phone,
    password,
    gender,
    role,
  
      }).then((response)=&gt; {
        console.log(&quot;response&quot;, response)
        localStorage.setItem(&quot;login&quot;, JSON.stringify({
       userLogin: true,
        token: response.data.access_token,
        }));
      setError(&quot;&quot;);
      setUsername(&quot;&quot;);
      setEmail(&quot;&quot;);
      setPhone(&quot;&quot;);
      setPassword(&quot;&quot;);
      setGender();
      setRole();
       history.push(&quot;/login&quot;);
      }).catch(error =&gt;setError(error.response.data.message));
    };
      return (
         &lt;div&gt;
           &lt;div id=&quot;getstarted&quot;&gt;Get started&lt;/div&gt;
  &lt;div id=&quot;intro&quot;&gt;&lt;span&gt;Sign up&lt;/span&gt; to our website and start to explore your unique style today !&lt;/div&gt;
  &lt;div class=&quot;center&quot;&gt;
        &lt;form onSubmit={register}&gt;
    
          &lt;div class=&quot;txt_field&quot;&gt;
            &lt;input type=&quot;text&quot; required
             value={username} 
             onChange={(e)=&gt; setUsername(e.target.value)}/&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;label&gt;Username&lt;/label&gt;
          &lt;/div&gt;
          
            &lt;div class=&quot;txt_field&quot;&gt;
            &lt;input type=&quot;text&quot; required
            value={email} 
            onChange={(e)=&gt; setEmail(e.target.value)}/&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;label&gt;Email&lt;/label&gt;
          &lt;/div&gt;
            
            &lt;div class=&quot;txt_field&quot;&gt;
            &lt;input type=&quot;text&quot; required
            value={phone} 
            onChange={(e)=&gt; setPhone(e.target.value)}/&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;label&gt;Phone number&lt;/label&gt;
          &lt;/div&gt;
            
          &lt;div class=&quot;txt_field&quot;&gt;
            &lt;input type={showPass ?&quot;text&quot;:&quot;password&quot; }required
            value={password} 
            onChange={(e)=&gt; setPassword(e.target.value)}/&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;label&gt;Password&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=&quot;password1&quot; onClick={()=&gt;{if(showPass == true){setshowPass(false)}else {setshowPass(true)}}}&gt; 
                   {showPass ? &lt;VisibilityIcon/&gt; : &lt;VisibilityOffIcon/&gt;}
          &lt;/div&gt;
            &lt;div class=&quot;txtfield_1&quot;&gt;
            &lt;input type={showconfirmPass ?&quot;text&quot;:&quot;password&quot; } required/&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;label&gt;Confirm Password&lt;/label&gt;  
          &lt;/div&gt;
          &lt;div class=&quot;confirm&quot;  onClick={()=&gt;{if(showconfirmPass == true){setshowconfirmPass(false)}else {setshowconfirmPass(true)}}}&gt; 
                   {showconfirmPass ? &lt;VisibilityIcon/&gt; : &lt;VisibilityOffIcon/&gt;}
  
            {error &amp;&amp; &lt;p2 style={{
            color:&quot;red&quot;,
             position:&quot;absolute&quot;,
             top:&quot;580px&quot;, width:&quot;500px&quot;, left:&quot;15vw&quot;
             }}&gt;{error}&lt;/p2&gt;}
  
          &lt;/div&gt;
            &lt;div id=&quot;general&quot;&gt;
            &lt;div class=&quot;signup_link&quot;&gt;
            Already have an account? &lt;Link to=&quot;/login&quot;&gt;Sign in&lt;/Link&gt;
          &lt;/div&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Learn More&quot;/&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      
      &lt;div id=&quot;rightside&quot;&gt;
      &lt;div id=&quot;sex&quot;&gt;Sex&lt;/div&gt;
      &lt;div id=&quot;button&quot;&gt;
  
          &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value={gender ==&quot;male&quot;} onChange={(e)=&gt; setGender(e.target.value)}/&gt;
          &lt;label for=&quot;male&quot;&gt;&lt;/label&gt;
          &lt;span&gt;Male&lt;/span&gt;
          &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value={gender ==&quot;female&quot;} onChange={(e)=&gt; setGender(e.target.value)}/&gt;
          &lt;label for=&quot;female&quot;&gt;&lt;/label&gt;
          &lt;span&gt;Female&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;rect1&quot;&gt;
        &lt;button class=&quot;button&quot; type=&quot;button&quot; value={role == &quot;shop&quot;} onChange={(e)=&gt; setRole(e.target.value)}&gt;&lt;img src={process.env.PUBLIC_URL + `/Images/shop 1.png`} /&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;rect2&quot;&gt;
        &lt;button class=&quot;button&quot; type=&quot;button&quot; value={ role == &quot;customer&quot;} onChange={(e)=&gt; setRole(e.target.value)}&gt; &lt;img src={process.env.PUBLIC_URL + `/Images/take-away.png`} /&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
      }
  export default Register
  </code></pre>