Skip to content

MarharytaZahalets/TaskManager

Repository files navigation

This is a Task Manager project, bootstrapped using @react-native-community/cli.

Welcome to Task Manager App repository 🚀

gif

Full app screen recording:

Getting Started

Project Setup Environment

IDE

  • WebStorm: 2024.2.3

Global Requirements

  • Node.js: 23.1.0 (required version >= 18.18, installed using Homebrew)
  • Ruby: 3.3.0 (required version >= 3.0.0, installed using Homebrew)
  • CocoaPods: 1.16.2
  • React Native: 0.76 (if using the New RN Debugger)

Project Requirements

  • React Native: 0.75.4
  • TypeScript: 5.0.4 (required version >= 5.0.0)

Note: Ensure you've completed the React Native 0.75 - Environment Setup instructions up until the "Creating a new application" step before proceeding.

Step 1: Install modules and pods

First, you need to install all dependencies.

Run the following commands in the root of the project to install node_modules:

npm install

For pods installation run:

npx pod-install

or

cd ios && pod install && cd ..

Step 2: Start the Metro Server

Second, start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run one of the following commands from the root of the Task Manager project:

  • Without debugger:
npm start

This project uses the New RN Debugger, which uses React Native v0.76 globally (this will be installed during the process when you run the command above). If you don’t want to use the debugger, just continue with npm start.

  • With debugger:
npx react-native start --experimental-debugger

Step 3: Start the JSON Server

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project and run the following command to start json-server:

json-server --watch db.json --port 3000

You can change the port if needed. To ensure everything works as expected, you should see the following in your terminal:

JSON Server started on PORT :3000
Press CTRL-C to stop
Watching db.json...

♡( ◡‿◡ )

Index:
http://localhost:3000/

Static files:
Serving ./public directory if it exists

Endpoints:
http://localhost:3000/taskList

Now, we can start the application.

Step 4: Start the Task Manager

Note: This application uses json-server, so to enable the main functionality (task management), please run this application on an iPhone/iPad Simulator or Android Emulator. It may not work correctly on real devices.

Let json-server run in its own terminal. Open a new terminal from the root of the project and run the following command to start your Android or iOS app:

For Android

npm run android

For iOS

npm run ios

If everything is set up correctly, you should see the Task Manager running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app - you can also run it directly from within Android Studio or Xcode.

Troubleshooting

  • Error: listen EADDRINUSE: address already in use :::[port] then run json-server --watch db.json --port 3000 or npx react-native start --experimental-debugger that uses port 8081:

Run the following commands in your terminal.

  1. Find the process using the port
sudo lsof -i :[port]
  1. Kill the process
kill -9 <PID>

Note: -9 kills the process immediately, and gives it no chance of cleaning up after itself. This may cause problems. Consider using -15 (TERM) or -3 (QUIT) for a softer termination which allows the process to clean up after itself.

  • If you encounter any issues with React Native, refer to the Troubleshooting page.

Contacts

If you have questions, remarks, or need help with setup, feel free to reach out via email: [email protected]

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published