jiggydevs / twikkl-app Goto Github PK

Description

We need to include a "Wallet" screen (see screenshot below). This issue focuses on creating the static version of the "Wallet" screen, providing users with a visual representation of how it will look.

Context

By including a "Wallet" screen, we can showcase the app's potential to handle financial activities and transactions seamlessly.

Requirements

1. Design and Layout: Create a layout for the "Wallet" screen that aligns with the overall app design and theme.
2. Data: Populate the screen with fake data.
3. Navigation : Ensure that the "Wallet" screen is accessible through the appropriate navigation flow.

Acceptance Criteria

To consider this issue resolved, the following criteria should be met:

1. The static "Wallet" screen is visually consistent with the rest of the app's design and layout.
2. Fake data is used to represent UI elements.
3. Users can navigate to the "Wallet" screen as intended within the app.
4. The screen layout is responsive and adapts well to different screen sizes.
5. The app works fine on Android and iOS

Additional Information

Respect our README and CONTRIBUTING guides.

Please refer to the design mockups and any relevant documentation provided to guide the implementation of the static "Wallet" screen. Keep in mind that this version of the screen does not require deep logic or backend functionality.

Feel free to reach out if you have any questions or need further clarification on TwikkL Discord or discussions.

Hello!

A first native build on Android was created on Expo website. We've tried the app on emulator and device and it seems to be not ok.

According to the design, Users can either add a live video or upload a video.
The user also has the ability to edit video and also other functions according to the design

We are looking to set up 5 common languages:

1. English
2. French
3. Arabic
4. Hindi
5. Chinese

The app must be translated in english as default.

The expressions must be taken, initially from the design images (available under /docs folder)

New visitors will look for how the app must be visually, so they may ask about the design source files (Figma, Zeplin, Adobe XD etc..). If so, it might be better to put these sources up and ready to use.

It seems that, that kind of files may be heavy, so Git may not manage it quickly. That's why we think about putting these source files somewhere on cloud server, and add a small link to README file to download them easily.

We think that testing is important, but its not an option, its essential! 🙂

Following the React Native testing guide, it seems there are many sorts of tests in mobile development. We recommend to use Jest, which is a powerful tool to control components in tests.

Our app at its current stage has only 1 screen complete (hierarchy) which is Register.

Also, we think that Snapshot or Unit tests are good to start with. If there is more, it will be fine 😁 .

We suggest to follow the Expo testing guide as well, as it seems well organized.

For Integration Tests, we suggest to take a look at React Native Testing Library which seems to be powerful and effective 🔥.

Currently, we dont have any exact rules like where to place tests or when to launch them, we're still analyzing the possible approaches.

Anyone with better suggestions are welcome

According the design sheets, the app must have an internal navigator, known as bottom-tab navigator.

The first route must be for Home screen, you can add another fake page to test the movement.

We would like to propose the implementation of a Dark Mode feature for each screen in the application. Currently, our app does not provide a Dark Mode option, and users who prefer a darker color scheme are not able to take advantage of this accessibility feature.

The goal of this issue is to introduce Dark Mode support throughout the app, allowing users to switch between light and dark themes seamlessly.

According to the design, there are two kinds of profile screen, one for when you're viewing another user's profile and the other for when you're viewing your profile.

In the context of starting dev on the app, we're interested to complete the 1st screen of it: Create new Account.

The design images are ready for use they are available under in docs folder.

Home screen must be shown as a preview of the device's front or back camera. It must also have some icons as UI buttons.

In order to know the full perspective, please refer to design images available under /docs folder.

NOTE: currently there is actually a screen Create Account (represented by Register.tsx file), and there is no navigation yet, so feel free to replace Register screen in App.tsx while you're developing it as follows:

export default function App() {
  //.. some code
  else {
    return (
      <PaperProvider theme={theme}>
        <StatusBar style="auto" />
        <ScreenHome /> // 👈 HERE
      </PaperProvider>
    );
  }
}

Once done, we're going to add navigation setup between multiple screens.

Hello!

In the context of app-scaling, its obvious to have multiple screens and user(s) will want to navigate through. Thus, we expect to use react-navigation in combination with expo-router.

In the context of publishing the project with the dev communities, it's a good idea to create a Discord server where all members can meet and talk about issues, plans, events etc..

According to the design, build all the screens in the discover flow.

This flow is accesible when users click in discover from the home screen.
Its a different screeb from the feed screen.

The project is getting serious and thats a good news 😅. As its opensourced, it needs to be documented with minimum informations and guides to help visitors, contributors to understand it and be aware of its aspects.

TODO: Update README.md file and create a first acceptable documentation. Any further information or discussion can be exchanged here.

According to the design, users can share feeds with other users and also have access to many other share options.

This flow is a bottom sheet.