Cuttr – Connect, Share & Trade Plants

Cuttr: Connecting Plant Lovers (Like Me!)

Cuttr is my way of bringing plant enthusiasts together. I built it so users can easily trade plants or cuttings, chat with each other, and help each other to diversify their plant collection with the most interesting plants. It’s my first big project that ties together a mobile app and a backend.

A Simple and Fun Mobile Experience

My mobile app is designed to be intuitive, I'm continually trying to fine-tune the user experience. It lets you:

Swipe & Match: Browse plants and like the ones you’re into.
Browse with filters: Include filters on the explore page to find specific plants.
Messaging: Once you make a connection you chat and set up a meet to trade plants or cuttings.
Trade Proposals: Suggest trades in a seamless way.
Profile & Plant Gallery: Set up your profile and add plants to trade with to your gallery.

In the future I’m also looking to include a social media aspect where people can further interact with each other, share their knowledge, or just show off their proudest pieces.

Frontend Architecture & Tools

My app’s frontend is built with React Native using the Expo framework. I chose a feature‑based folder structure to keep my code modular and organized. This helps me add new features while ensuring a clean and structured architecture.

Folder Structure Example

CUTTRAPP/
└── MyCuttrApp/
    ├── app/
    │   ├── api/              // API services (authService, axiosConfig, etc.)
    │   ├── components/       // Reusable UI components (e.g. TextInputField, ErrorMessage)
    │   ├── features/         // Feature-specific code:
    │   │   ├── auth/         // Authentication screens, store, and styles
    │   │   ├── main/         // Main features: chat, swipe, profile, trade proposals, main-app components etc.
    │   │   └── onboarding/   // Onboarding screens for new users
    │   ├── i18n/             // Internationalization setup and locale files
    │   ├── navigation/       // Navigation configuration (AuthNavigator, MainTabNavigator, etc.)
    │   ├── store/            // Redux store setup, slices, and middleware
    │   ├── theme/            // Theme constants and styles
    │   ├── types/            // Type definitions and enums
    │   └── utils/            // Utility functions (logger, secure storage, etc.)
    ├── app.config.js
    ├── babel.config.js
    ├── tsconfig.json
    └── package.json

Code Architecture Overview

App Layer:
- Built with React Native & Expo for cross‑platform development.
- Uses a modular folder structure that separates features (auth, main, onboarding), components, navigation, etc.
State Management:
- Redux Toolkit manages the global state—especially the user authentication state via an authSlice.
- Async thunks (like loginThunk and refreshTokenThunk) handle API calls and token refreshing.
- Expo Secure Store is used to save sensitive data (tokens and language settings) securely between sessions.
Data Fetching:
- React Query handles network requests, caching, and automatic refetching for a smooth data flow.
- Axios is configured with interceptors that automatically attach authentication tokens from Redux to every request.
Internationalization:
- i18next combined with Expo Localization supports multiple languages.
- This allows the app to easily switch languages without extra code in the components.

In summary, my app uses Redux Toolkit to manage authentication state with async thunks, while secure storage keeps tokens safe. React Query makes data fetching easy, and Axios ensures all HTTP requests include the correct auth headers. Together with i18next for translations, this architecture helps keep the code organized and scalable.

Backend Architecture & Organized Code for a Growing App

I built the backend using a layered architecture in ASP.NET Core (.NET 8), dividing responsibilities into three main parts:

Cuttr.Api: Hosts all the RESTful endpoints—this is where controllers and custom middleware (for error handling and logging with Serilog) reside.
Cuttr.Business: Contains the core logic with business managers, entities, data contracts and utilities such as JWT token generation and password hashing.
Cuttr.Infrastructure: Manages data persistence with Entity Framework Core and SQL Server, including repositories and migrations.

This modular, organized approach keeps the code maintainable and scalable as I continue adding new features. The diagram below shows the overall layered architecture along with the inner structure of the project.

%%{init: {'theme': 'default', 'themeVariables': { 'fontSize': '25px' }}}%% flowchart LR Client[Client] A[Cuttr.Api
Controllers & Middleware] B[Cuttr.Business
Contracts, Managers & Utilities] C[Cuttr.Infrastructure
Repositories & EF Entities] D[(Database)] Client -- "Sends Request" --> A A -- "Forwards to" --> B B -- "Accesses" --> C C -- "Queries" --> D D -- "Returns Data" --> C C -- "Returns Data" --> B B -- "Processes Response" --> A A -- "Sends Response" --> Client

API: The Heart of Cuttr

My API has endpoints for all the main features:

User Authentication: Login, logout, and token refreshing.
Plant Management: Add, update, get, and delete plants.
Swipes & Matches: Record swipes and handle matching.
Messaging: Chat with connections.
Trade Proposals & Reports: Propose trades and report issues.

Each controller (like AuthController, PlantController, etc.) comes with error handling and each endpoint needs authorization with a valid JWT token by default.

Data Storage with SQL Server & Geospatial Support

I use SQL Server for data storage, connecting it with Entity Framework Core. I integrated NetTopologySuite to perform geospatial queries—this is key for features like finding nearby plants. I’m using migrations to keep the database schema in sync as I fine-tune the database through experience and adding new features.

Keeping Things Secure and Reliable

Security was a big priority for me, even though I’m just starting out:

JWT & Refresh Tokens: I use short-lived JWTs and refresh tokens for authentication.
Middleware: Custom middleware handles exceptions and logs details using Serilog.
Password Hashing: Passwords are secured with BCrypt.
Guid: While not yet implemented, future iterations will use GUIDs instead of ints to prevent enumeration attacks.
Rate Limiting: I plan to add rate limiting to prevent abuse.

These measures help ensure that users’ data stays safe while giving me valuable experience in implementing security best practices.

Taking It to the Cloud on Azure

I deployed Cuttr on Azure to ensure it’s available and scalable. The key components are:

Azure App Service (Web App): Hosting the API.
Azure SQL Database: For reliable, scalable data storage with spatial features.
Azure Blob Storage: For storing user images securely.
GitHub Actions: I set up a CI/CD pipeline that automatically builds and deploys updates.

Cuttr – My First Big Step as a Developer

Cuttr is my journey into full stack development—combining a mobile app with a custom-built API and cloud infrastructure. I’m proud of what I’ve built so far, and I’m excited to keep learning and iterating.

Right now I am fine-tuning the existing features and UI/UX design. The next step is getting my app ready for deployment on the actual app stores. After this, I’m excited to start building a social media expansion where users can further interact, share their experiences, and show off their coolest looking plants.

If you’re interested in trying it out, checking out the code, or even collaborating, let’s connect!

View Live Demo Explore GitHub Repository Get in Touch