Git Product home page Git Product logo

twikkl-app's Issues

Set contributing guidelines, update documentation

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.

Screen Wallet

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.

image

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.

Add bottom-tab navigator

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.

Add link in README to download design source folder/file(s)

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.

Create Video Screen flow

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

Modal-Share flow

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.

Screens Discover Flow

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.

Add screen Home

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.

Screen profile

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.

Localize app + add translations

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)

Set up testing configuration and create a 1st test

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

Add Dark/Light Mode Support

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.

TwikkL Discord community

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..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.